Question

我有一些特定于视图的脚本。但是，当angularjs加载视图时，脚本似乎不会执行。

的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 - 在ng-view下加载

hello world
  <script>

    alert('Hello, John!')

  </script>

在这个例子中，当页面加载时，我看到网站上印有一个基本的hello世界。但是，我没有得到任何弹出说“你好，约翰”。

知道为什么我无法加载特定视图的脚本吗？

额外信息 的 app.js

'use strict';

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

控制器/ main.js

'use strict';

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

Answer 1

jqLite 的工作方式。如果您希望评估模板中的脚本，请在AngularJS之前包含 jQuery 。如果包含jQuery，则将评估该脚本。尝试删除jQuery，您会看到最初观察到的行为。

已更新：由于有些人要求在评论中详细说明，请点击：

当路由匹配时，ngView使用jqLite（或jQuery＆＃39; s，如果已加载）html()方法来设置元素的内容（{{1}声明于）。换句话说，ngView做了类似的事情：

ngView.link()

因此，归结为如何在jqLite和jQuery中实现$element.html(template)。 jqLite使用本机html()属性，该属性仅设置内容但不评估脚本。另一方面，jQuery解析所有脚本标记并执行它们（通过构造脚本DOM元素并将其附加到页面）。

Answer 2

如果我包含需要使用视图的脚本，如何在加载视图时触发它？我不想包含jquery和/或片段化我的脚本。

要在不加载jQuery的情况下执行<script>标记，请使用jqLite查找<script>标记，然后eval innerHTML。

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

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

});

DEMO on PLNKR

另见AngularJS Issue #369 — jqLite should create elements in same way as jQuery

Angularjs不会在ng-view中加载脚本

2 个答案: