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

how to include javascript file specific to each view angularjs

本文关键字：angularjs javascript 文件 视图 于每个 何包含      更新时间：2023-09-26

我遇到的问题是，在将loadjs文件绑定到网格之前，并不总是加载它。我读过其他关于使用指令的帖子，但我不知道如何在我的情况下使用它们。

代码应该加载一个特定的视图，每个视图都有一个特定javascript文件，在视图最终更新之前需要加载该文件

因此，视图1可能是具有datagrid.js文件依赖性的数据网格，而视图2是具有listview.js依赖性的listview

谢谢。

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"
                });
});

}

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

无论如何，您应该将它们包含在主应用程序中。所有控制器都应在主应用程序启动时加载。（这是您放置npApp指令的位置）

试试这样的东西（它可能"更具角度"，但目前它对我有效）：

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();
    });
}]);

如果你想在指令中这样做，你可以做这样的

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

HTML:

<require script-src="/foo.js">
<require script-src="/bar.js">
相关文章：