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

IT技术 javascript html angularjs
2021-02-07 00:48:10

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

索引.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 world 打印在网站上。但是，我没有收到任何说“你好，约翰”的弹出窗口。

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

额外信息 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'
    ];
  });
2个回答

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

更新：由于有人要求在评论中详细说明，这里是：

当路由匹配时，ngView使用 jqLit​​e 的（或 jQuery 的，如果已加载）html()方法来设置元素的内容（ngView声明的内容）。换句话说，ngView.link()做这样的事情：

$element.html(template)

所以它归结为如何html()在 jqLit​​e 和 jQuery 中实现。jqLit​​e 使用 nativeinnerHTML属性，它只设置内容但不评估脚本。另一方面，jQuery 解析出所有脚本标记并执行它们（通过构造脚本 DOM 元素并将其附加到页面）。

@ZachL jqLit​​e 是 jQuery 的“精简版”版本，包含 AngularJS 所需的最少 DOM 相关功能（html() 就是其中之一）。AngularJS 开发人员不想依赖开箱即用的 jQuery，因为它非常庞大。jqLit​​e 的最小性质意味着如果你需要更多的东西（比如评估脚本的 html() 版本），你必须使用 jQuery。在初始化过程中，AngularJS 代码会自动检查是否包含 jQuery，如果包含则使用，否则使用内置的 jqLit​​e。
2021-03-20 00:48:10
@ZachL 这是一个很长的故事来适应评论，所以我附上了答案。希望能帮助到你。
2021-03-21 00:48:10
他们可能删除了它，或者我不知道什么原因。重点仍然是：如果要执行脚本，请包含 jQuery。
2021-04-02 00:48:10
您知道 jqLit​​e 为什么以及如何做到这一点吗？还有另一种方法而不是包含 jQuery 吗？
2021-04-02 00:48:10
添加 jquery 完成了工作！谢谢！:)
2021-04-13 00:48:10

如果我包含需要处理视图的脚本，我如何在视图加载后触发它？我不想包含 jquery 和/或碎片化我的脚本。

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

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

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

});

PLNKR 上的演示

另请参阅AngularJS 问题 #369 — jqLit​​e 应该以与 jQuery 相同的方式创建元素

其它你可能感兴趣的问题
上一篇如何确定 Javascript 是否存在 css 类？ 下一篇在 jQuery 中，按类或 id 选择是否比按其他属性选择更快？