angularJS load non-angular javascript file within ng-view

Question

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

score 1 · Answer 1 · answered Feb 09 '15 at 14:15

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.

@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. — Pankaj Parkar, Feb 10 '15 at 06: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 '15 at 09: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.. — Pankaj Parkar, Feb 10 '15 at 09:07

score 1 · Answer 2 · answered Feb 09 '15 at 22:27

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.

This is weird. I tried the same thing on my machine and it's not working. — OMGPOP, Feb 10 '15 at 02:53
@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 '15 at 13:35

angularJS load non-angular javascript file within ng-view

2 Answers2