6

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.

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

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

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

}

dan
  • 2,857
  • 6
  • 34
  • 60
  • 2
    Not helping for your question but you should not access DOM in you controllers, you should write a kendoGrid directive to handle that, see http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller (Using Controllers Correctly section) – Guillaume86 Sep 17 '12 at 13:43

3 Answers3

3

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

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 npApp directive)

Umur Kontacı
  • 35,403
  • 8
  • 73
  • 96
  • 1
    So if I have 20 views instead of being able to dynamically load a js file for each view I have to hardcode src=mygrid.js into my main.html page?? I must be misunderstanding as this would cause each page load to have javascript that is not necessary to that view. – dan Sep 15 '12 at 16:09
  • There are other ways to load a javascript file dynamically but this is outside of angular. If you have 20 views it corresponds to 20 controllers, it may be a big file depending on the controller but if you have shared methods check out http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller (Section Controller Inheritance). Or you can create a service depending on your needs – Umur Kontacı Sep 16 '12 at 00:44
  • ok so in the above example I am loading the file dynamically using the isloadjscssfile which adds the file to the header but using the viewContentLoaded event to to bind to the grid but it doesn't gaurantee the file is loaded. Where in my code should I place the isloadjscssfile("js/model/gridmodel.js", "js") method and where should I place the Bind grid $grid code. It seems that the viewcontentload is to late an event to work correctly. What I need is a place that says if view1 then before doc.ready loadfile then on doc.ready bind to grid – dan Sep 16 '12 at 12:59
3

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

}]);
Matty J
  • 3,116
  • 32
  • 31
3

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 :

<require script-src="/foo.js">
<require script-src="/bar.js">
a8m
  • 9,334
  • 4
  • 37
  • 40