CODEWITHSUNDEEP
javascripthtmlangularjs
Karan
Karan

Reputation: 15114

Angularjs does not load scripts within ng-view

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'
    ];
  });

Upvotes: 46

Views: 29396

Answers (2)

georgeawg
georgeawg

Reputation: 48968

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

Upvotes: 1

Buu
Buu

Reputation: 50395

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

Upvotes: 63

Related Questions