我如何加载 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 17:39:47  来源:igfitidea点击:

how can i load javascript file along with ng-include template

javascriptjqueryangularjs

提问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, LoadngLoadScriptmodule as application dependency:

并且,将模块加载ngLoadScript为应用程序依赖项:

angular.module('myApp', [
    'ngLoadScript'
])

in Partial (**activity.html) use text/javascript-lazyas typeattribute value for scripttag 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>