Angularjs does not load scripts within ng-view

Question

I had some scripts specific to a view. However, the script does not seem to execute when angularjs loads the view.

Index.html

<html>
  <body ng-app="adminApp">

    <div ng-view=""></div>

    <script src="bower_components/angular/angular.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>

</body>
</html>

Main.html - loads under ng-view

hello world
  <script>

    alert('Hello, John!')

  </script>

In this example, when the page load, I see a basic hello world printed on the website. However, I do not get any pop up saying "Hello, John".

Any idea why I cannot load scripts specific to a certain view?

Extra info app.js

'use strict';

angular.module('adminApp', [])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

controllers/main.js

'use strict';

angular.module('adminApp')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

Buu · Accepted Answer · 2014-02-28 19:37:30Z

63

That's the way jqLite works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.

Updated: since some people asked for elaboration in the comments, here it is:

When a route is matched, ngView uses jqLite's (or jQuery's, if loaded) html() method to set the content of the element (the one ngView is declared on). In other words, ngView.link() does something like this:

$element.html(template)

So it boils down to how html() is implemented in jqLite and jQuery. jqLite uses the native innerHTML property, which only sets content but doesn't evaluate scripts. jQuery, on the other hand, parses out all script tags and executes them (by constructing and appending script DOM elements to the page).

edited Feb 28, 2014 at 19:37

answered Aug 13, 2013 at 22:37

Buu

50.5k6 gold badges72 silver badges85 bronze badges

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

12 Comments

Karan Over a year ago

Adding jquery did the job! Thanks! :)

Buu Over a year ago

They probably deleted it, or whatever reason I have no idea. The the point remains: if you want to execute script, include jQuery.

Murat Çorlu Over a year ago

Do you know, why and how jqLite did that? And is there another way instead of including jQuery?

Buu Over a year ago

@ZachL it's a long story to fit the comment, so I've appended to the answer. Hope it helps.

Buu Over a year ago

@ZachL jqLite is a "lite" version of jQuery, containing minimal DOM related functionalities (html() is one of them) that AngularJS needs. The AngularJS devs don't want to depend on jQuery out of the box because it's huge. The minimal nature of jqLite means if you need s/t more (like the version of html() that evaluate scripts), you have to use jQuery. During initialization, AngularJS code automatically checks if jQuery is included and uses if it is, otherwise it uses the built-in jqLite.

|

georgeawg · Accepted Answer · 2017-03-17 00:13:07Z

1

If I include my script that needs to work with the view, how can I trigger it when the view has loaded? I don't want to include jquery and/or fragmentate my script.

To execute the <script> tag without loading jQuery, use jqLite to find the <script> tag and then eval the innerHTML.

app.controller("vm", function($scope, $element) {

  //FIND script and eval 
  var js = $element.find("script")[0].innerHTML;
  eval(js);

});

The DEMO on PLNKR

See also AngularJS Issue #369 — jqLite should create elements in same way as jQuery

edited Mar 17, 2017 at 0:13

answered Mar 16, 2017 at 22:16

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Angularjs does not load scripts within ng-view

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related