current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I use ng-route with ng-view for my client canvas drawing app. The drawing code is in a separated non-angular js file. I need to put 

<div id="container"></div>
<p id="json"></p>

and

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all.js"></script>
<script type="text/javascript" src="/public/canvas/projectTemplate.client.canvas.js"></script>

in the target ng-view.

The problem is, I can't add the scripts in the ng-view html file. (I dont see it on the browser debug window)

I have tried putting scripts in the parent html file (which contains the ng-view), and keep #container and #json in the ng-view (which i have to, because only this page needs these 2 elements), it has an error saying parentNode is not found, because at that time, ng-view (#container and #json) has not been loaded, while the scripts have been loaded

Edit:

I tried this on the subpage html: 

<p id="p">this is text</p>

<script type="text/javascript">

    (function() {
        var p = document.getElementById('p')
        p.innerText = 'changed by js'

    })()

</script>

but it's not working

share|improve this question

3 Answers 3

up vote 1 down vote accepted

There is no existing way to include javascript files in the subpage. (I don't think Josh's solution will work on an actual server).

Instead of using a custom directive (which may work, but troublesome), why not just use the build in attribute

Try this:

  1. include the custom javascript files in the main page (from the server)
  2. create another html file just for the canvas, and put the #container and #json there
  3. in the subpage, include the canvas html <div ng-include src="'/public/canvas/canvas.html'" onload="canvasReady()"></div>
  4. call the starting function of custom javascript inside $scope.canvasReady() function
share|improve this answer
up vote 1 down vote

I'm not completely sure what the issue is you are running into exactly, but you can load a <script> tag into a template with no problems. So long as it's down at the bottom, the DOM elements will be available when it executes.

Imagine we had a template that looked like this:

<div class="row">
  <div class="col-sm-12">
    <h1 id="title_header"></h1>
    <script src="dynamic-element.js" type="text/javascript"></script>
  </div>
</div>

You can see we have an <h1> element with an id="title_header" in it. And our script that is loaded in this template looks something like this.

(function(){

  var h1 = document.getElementById('title_header');

  h1.innerText = "I was created dynamically by plain old JavaScript";
  h1.style.color = 'red';

}());

The result will be an <h1> populated with red text dynamically by the script.

But don't take my word for it. See the example for yourself.

share|improve this answer
    
This is weird. I tried the same thing on my machine and it's not working. –  OMGPOP Feb 10 at 2:53
    
it is working on plunker, but not on my machine –  OMGPOP Feb 10 at 2:57
    
@OMGPOP - What version of Angular are you using on your machine? Also, are you running this from a local web server like node.js or are you just loading the files from your file system? –  Josh Feb 10 at 13:35
up vote 1 down vote

Put the script reference in main page html itself, don't load those from the specific html file. Put only html inside that page. And don't call canvas function from you js on its initialization, you will never find the #container & #json.

To make them work you need to call it from directive whenever that directive element gets render on View.

HTML

<render-canvas>
  <div id="container"></div>
  <p id="json"></p>
</render-canvas>

Directive

app.directive('renderCanvas', function() {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        templateUrl: 'mytemplate.html',
        link: function($scope, element, attrs) {
            // here you can intialize your canvas code..
            // you will find all element 
            var container = element.finf('#container');
            var json = element.finf('#json');
            //now you have both the elements, you can play with those element
            //means you can initilize your canvas plugin here
            //don't initialize it on canvas.js. load you will never find target element.
        }
    }
});

Hope this could help you. Thanks.

share|improve this answer
    
is the <render-canvas> in mainpage or subpage –  OMGPOP Feb 10 at 6:51
    
@OMGPOP it should be inside subpage..when specific route page at that time this subview will render on html and then your directive will start working as i did in answer. –  pankajparkar Feb 10 at 6:55
    
why do you have templateUrl? I already have a router to replace the subpage to the ng-view. Or should i remove the ng-view? –  OMGPOP Feb 10 at 9:02
    
@OMGPOP no need to remove ng-view that is required..you only need to add directive on element..so that you can get that element..and then from directive you can draw js plumb chart on that element.. –  pankajparkar Feb 10 at 9:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.