如何有条件地在 Angular 中包含脚本元素答案

【问题标题】：How to conditionally include script element in Angular如何有条件地在 Angular 中包含脚本元素
【发布时间】：2016-09-08 13:42:22
【问题描述】：

我正在尝试有条件地在我的页面上包含一个聊天：

<body ng-app="myApp">
  <!-- some code -->

  <script type="text/javascript" ng-if="expression">
    window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
    d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
    _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
    $.src="//v2.zopim.com/?my-zopim-id";z.t=+new Date;$.
    type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
  </script>
</body>

但似乎聊天脚本在ng-if 指令之前执行。

如何让我的 Angular 应用先检查条件，然后从 <script> 标签执行脚本？

【问题讨论】：

你不能用 ng-if 你必须在实际的 javascript 中添加一个 if 语句。
@BobBrinks 你可以。
@estus 啊，是的，我明白了。你可能不应该。
@BobBrinks 这是真的！
来个很简单的<div ng-if="condition" ng-include="file/with/javascript/code.html"></div>

标签： javascript angularjs angularjs-directive

【解决方案1】：

可以通过一个技巧来实现：

  <script ng-if="..." type="{{ 'text/javascript' }}">
    ...
  </script>

绑定会阻止脚本以正常方式执行。

请注意，由于 Angular 的 jqLite 实现处理 <script> 元素的方式，上述内容仅在加载 jQuery 时（在 Angular 之前）才有效。

更简洁的方法是使用与上述<script> 相同的指令，但具有防止多次执行的保护措施（请注意，将<script> 放入指令的模板对jQuery 的要求与上述解决方案相同） .

【讨论】：

有趣的方式

【解决方案2】：

内联 Javascript 总是优先于 Angular（首先由浏览器解析）。最好的方法是使用条件或创建指令在控制器内注入/执行 javascript。

【讨论】：

您能详细解释一下解决方案吗？

【解决方案3】：

一种原生且轻量级的方法，即没有 jQuery，没有 Angular 指令，将使用类似 https://github.com/anywhichway/scriptswitch 的东西。

【讨论】：