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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

在ng-view下加载

hello world
  <script>
    alert('Hello, John!')
  </script>

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

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

额外信息

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

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

回答：

这就是 工作方式。如果要评估模板中的脚本，请在AngularJS之前添加

。如果包含jQuery，则将评估脚本。尝试删除jQuery，您会看到最初观察到的行为。

：由于有人要求在评论中进行详细说明，因此这里是：

当路由匹配时，ngView使用jqLit​​e的（或jQuery的，如果已加载）html()方法设置元素的内容（ngView声明为on）。换句话说，ngView.link()执行以下操作：

$element.html(template)

因此，归结为如何html()在jqLit​​e和jQuery中实现。jqLit​​e使用native

innerHTML属性，该属性仅设置内容，但不评估脚本。另一方面，jQuery解析出所有脚本标签并执行它们（通过在页面上构造和添加脚本DOM元素）。

以上是 AngularJS不会在ng-view中加载脚本 的全部内容， 来源链接： utcz.com/qa/405666.html

回到顶部