AngularJS: How to make angular load script inside ng-include?

Question

Hey I am building a web page with angular. The problem is that there are somethings already build without angular and I have to include them as well

The problem is this.

I have something like this in my main.html:

<ngInclude src="partial.html"> </ngInclude> 

And my partial.html has something like this

<h2> heading 1 <h2> <script type="text/javascript" src="static/js/partial.js"> </script> 

And my partial.js has nothing to do with angularjs. nginclude works and I can see the html, but I can not see the javascript file being loaded at all. I know how to use firebug/ chrome-dev-tool, but I can not even see the network request being made. What am I doing wrong?

I knwo angular has some special meaning to script tag. Can I override it?

Answer 1

The accepted answer won't work from 1.2.0-rc1+ (Github issue).

Here's a quick fix created by endorama:

/*global angular */ (function (ng) {   'use strict';    var app = ng.module('ngLoadScript', []);    app.directive('script', function() {     return {       restrict: 'E',       scope: false,       link: function(scope, elem, attr) {         if (attr.type === 'text/javascript-lazy') {           var code = elem.text();           var f = new Function(code);           f();         }       }     };   });  }(angular)); 

Simply add this file, load ngLoadScript module as application dependency and use type="text/javascript-lazy" as type for script you which to load lazily in partials:

<script type="text/javascript-lazy">   console.log("It works!"); </script> 

Answer 2

Short answer: AngularJS ("jqlite") doesn't support this. Include jQuery on your page (before including Angular), and it should work. See https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion