how to include javascript file specific to each view angularjs

Question

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: "&nbsp;", width: "210px" }],
                    editable: "inline"
                });
});

}

Not helping for your question but you should not access DOM in you controllers, you should write a kendoGrid directive to handle that, see docs.angularjs.org/guide/dev_guide.mvc.understanding_controller (Using Controllers Correctly section) — Guillaume86
– Guillaume86, Commented Sep 17, 2012 at 13:43

Umur Kontacı · Accepted Answer · 2012-09-15 12:13:15Z

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)

answered Sep 15, 2012 at 12:13

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dan Over a year ago

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.

Umur Kontacı Over a year ago

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 docs.angularjs.org/guide/dev_guide.mvc.understanding_controller (Section Controller Inheritance). Or you can create a service depending on your needs

dan Over a year ago

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

Matty J · Accepted Answer · 2013-11-27 23:54:38Z

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

}]);

answered Nov 27, 2013 at 23:54

Matty J

3,17635 silver badges31 bronze badges

Comments

a8m · Accepted Answer · 2014-04-02 05:18:49Z

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

answered Apr 2, 2014 at 5:18

a8m

9,4844 gold badges39 silver badges41 bronze badges

1 Comment

Guilhem Soulas Over a year ago

It doesn't work, the script is not loaded on time and is not accessible by the controller.

Collectives™ on Stack Overflow

how to include javascript file specific to each view angularjs

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related