如何包含特定于每个视图 angularjs 的 javascript 文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12436679/
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-26 16:11:42  来源:igfitidea点击:

how to include javascript file specific to each view angularjs

javascriptangularjs

提问by dan

The problem I am having is that the loadjs file doesn't always get loaded before I bind it to the grid. I have read other posts regarding using directives but I don't understand how to use them in my case.

我遇到的问题是 loadjs 文件在我将它绑定到网格之前并不总是被加载。我已经阅读了有关使用指令的其他帖子,但我不明白如何在我的情况下使用它们。

The code should load a specific view each view in turn has a specific javascript file that needs to be loaded before the view is finally renered

代码应该加载一个特定的视图,每个视图依次有一个特定的 javascript 文件,需要在视图最终重新渲染之前加载

So view 1 might be a datagrid with datagrid.js file dependancy and view2 is a listview with listview.js dependancy

因此,视图 1 可能是具有 datagrid.js 文件依赖关系的数据网格,而视图 2 是具有 listview.js 依赖关系的列表视图

Thanks.

谢谢。

Function MyCtrl1($scope) {
$scope.$on('$viewContentLoaded', function() {

     //Load file if not already loaded
    isloadjscssfile("js/model/gridmodel.js", "js")


  $("#grid").kendoGrid({
                    dataSource: getdatasource(),
                    pageable: true,
                    height: 400,
                    toolbar: ["create"],
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
                        { field: "UnitsInStock", title:"Units In Stock", width: "150px" },
                        { field: "Discontinued", width: "100px" },
                        { command: ["edit", "destroy"], title: " ", width: "210px" }],
                    editable: "inline"
                });
});

}

}

采纳答案by Umur Kontac?

You can't. Angular does not load javascript parts from a template.

你不能。Angular 不会从模板加载 javascript 部分。

What you should do is to include them in your main application anyway. All of the controllers should be loaded while the main app is initiating. (This is where you put your npAppdirective)

无论如何,您应该做的是将它们包含在您的主应用程序中。所有控制器都应该在主应用程序启动时加载。(这是您放置npApp指令的地方)

回答by Matty J

Try something like this (it could probably be "more Angular", but for the moment it works for me):

尝试这样的事情(它可能是“更多的角度”,但目前它对我有用):

angular.module('MyApp').controller('MyCtrl1', ['$scope', function ($scope) {

    window.initialize = function() {
        // code to execute after your JS file referenced in the loadScript function loads
    }

    var loadScript = function () {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://www.myserver.com/file.js?callback=initialize';
        document.body.appendChild(script);
    }

    $scope.$on('$viewContentLoaded', function () {
        loadScript();
    });

}]);

回答by a8m

If you want to this in directive, you can do something like this

如果你想在指令中这样做,你可以做这样的事情

.directive('require', function(){
    return{
      restrict: 'E',
      scope: {
         scriptSrc: '@'
      },
      template:'<script type="text/javascript" src="{{ scriptSrc }}"></script>',
      link: function(scope, elm, attr){
        ....
      }
      replace: true
    }
});

HTML :

HTML :

<require script-src="/foo.js">
<require script-src="/bar.js">