各ビューに固有のjavascriptファイルを含める方法angularjs

Question

私が抱えている問題は、loadjsファイルがグリッドにバインドされる前にロードされるとは限りませんということです。私はディレクティブの使用に関する他の投稿を読んだことがありますが、私の場合はディレクティブの使い方を理解していません。

コードが順番に各ビューは、ビューの前にロードする必要はJavaScriptファイルの特定が最終的に

をreneredされていますので、ビュー1がdatagrid.jsファイルの依存とVIEW2とデータグリッドであるかもしれない特定のビューをロードする必要がありますlistview.js依存関係のリストビューです

ありがとうございました。

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

}

Answer 1

あなたがすることはできません。 Angularはテンプレートからjavascriptの部分をロードしません。

あなたがするべきことは、とにかくあなたのメインアプリケーションにそれらを含めることです。メインアプリケーションの起動中は、すべてのコントローラをロードする必要があります。

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

}]); 

Answer 2

（それはおそらく「より角度」かもしれないが、一瞬、それは私のために動作します）、このような何かを試してみてください（あなたのnpAppディレクティブを置く場所です）ディレクティブで、あなたはこの

.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"> 

Answer 3

あなたはこれにしたい場合：