我使用以下代码将模板包括到我的主文件中。
<p ng-include=" 'activity.html' "></p>
我的 activity.html 像这样,
<script type="text/javascript" src="myjsfile.js"></script> <p>Activity page contents</p>
但是javascript并没有随模板一起加载 。
我在SO中发现了一些与此问题相关的问题,但找不到有效的解决方案。答案之一是在主文件中的angularjs上方加载jquery,以便脚本标记将被接受。但没有发现它起作用。
我在ng-include里面的加载脚本中找到了这个答案,不幸的是那里没有被接受的答案。因此,我在这里为它提供一些更多更新以供需要。
图书馆链接在这里
创建一个包含以下脚本的js文件并将其加载到主文件中。
(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));
并且,将 模块作为应用程序依赖项 加载ngLoadScript :
ngLoadScript
angular.module('myApp', [ 'ngLoadScript' ])
在Partial( activity.html)中text/javascript-lazy用作标记的type属性值,script而不是text/javascript:
text/javascript-lazy
type
script
text/javascript
<script type="text/javascript-lazy"> alert("Yup!"); </script>
加载外部js需要做的更多事情:
我已经使用了以下来自ddrive的代码来加载脚本(在main.html中 )
function loadjscssfile(filename, filetype) { if (filetype == "js") { // if filename is a external JavaScript file var fileref = document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); } else if (filetype == "css") { //if filename is an external CSS file var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref != "undefined") { document.getElementsByTagName("head")[0].appendChild(fileref) } }
以及部分(activity.html):
<script type="text/javascript-lazy"> loadjscssfile("myjsfile.js", "js"); </script>