我如何加载 javascript 文件和 ng-include 模板
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20087274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can i load javascript file along with ng-include template
提问by Prasanth K C
i am including a template into my main file using below code.
我使用以下代码将模板包含在我的主文件中。
<p ng-include=" 'activity.html' "></p>
my activity.htmlgoes like this,
我的activity.html是这样的,
<script type="text/javascript" src="myjsfile.js"></script>
<p>Activity page contents</p>
But the javascript is not getting loaded along with the template.
但是 javascript 没有随模板一起加载。
I found some questions related to the same in SO, but not able to find a working solution. One of the answer says load jquery above angularjs in main file, so that the script tag will get accepted. But not found it working.
我在 SO 中发现了一些与此相关的问题,但找不到有效的解决方案。答案之一是在主文件中将 jquery 加载到 angularjs 之上,以便脚本标记被接受。但没有发现它工作。
回答by Prasanth K C
I found this answer here load script inside ng-include, Unfortunately it was not the accepted answer there. So i am providing it here with some more updates for the need.
我在这里找到了这个答案ng-include 中的加载脚本,不幸的是它不是那里接受的答案。所以我在这里为它提供了一些需要的更新。
Library link here
图书馆链接在这里
Create a js file contains the following script and load it in the main file.
创建一个包含以下脚本的 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));
and, LoadngLoadScript
module as application dependency:
并且,将模块加载ngLoadScript
为应用程序依赖项:
angular.module('myApp', [
'ngLoadScript'
])
in Partial (**activity.html) use text/javascript-lazy
as type
attribute value for script
tag instead of text/javascript
:**
在 Partial (**activity.html) 中text/javascript-lazy
用作标签的type
属性值script
而不是text/javascript
:**
<script type="text/javascript-lazy">
alert("Yup!");
</script>
little more to do for loading external js:
加载外部 js 要做的更多:
i have used below code from ddrivefor loading scripts (in main.html)
我使用了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)
}
}
and in partial (activity.html):
和部分(activity.html):
<script type="text/javascript-lazy">
loadjscssfile("myjsfile.js", "js");
</script>