How to include javascript file for each kind of angularjs

Question

The problem I encountered is that the loadjs file does not always load before binding it to the grid. I read other posts regarding the use of directives, but I don't understand how to use them in my case.

The code must load a specific view, each view, in turn, has a specific javascript file that must be loaded before the view finally appears

Thus, view 1 can be a datagrid with the dependency of the datagrid.js file, and view2 can be a list with the dependency 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" }); }); 

}

Answer 1

You can not. Angular does not load parts of JavaScript from the template.

What you have to do is include them in the main application. All controllers must load while the main application is starting. (Here you put your npApp directive)

Answer 2

If you want this in a 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:

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

Answer 3

Try something like this (maybe it will be “more Angular”, but at the moment this 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(); }); }]);