javascript - 如何有条件地在 Angular 中包含脚本元素

标签 javascript angularjs angularjs-directive

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

<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> 执行脚本标签?

最佳答案

可以用一个技巧来实现:

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

绑定(bind)将阻止脚本以正常方式执行。

请注意,由于 Angular 的 jqLit​​e 实现处理 <script> 的方式,以上内容仅在加载 jQuery 时(在 Angular 之前)有效。元素。

更简洁的方法是使用与 <script> 相同的指令上面但有防止它多次执行的保护措施(请注意,将 <script> 放入指令的模板中对 jQuery 的要求与上述解决方案相同)。

关于javascript - 如何有条件地在 Angular 中包含脚本元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39392578/

相关文章:

javascript - 具有隔离范围的单元测试 AngularJS 指令 - 如何获取输出的绑定(bind)?

javascript - 理解javascript多维数组的问题

php - CORS 中的 Angular 应用程序丢失 session

javascript - $routeProvider - 为所有路由注入(inject)相同的依赖项

firefox - Angular xhr 请求在 Firefox 中导致重定向警告

javascript - $watch 只触发一次

javascript - Bootstrap datetimepicker 动态改变格式

javascript - 在javascript中通过.indexOf()传递两个变量?

javascript - 在某些页面上禁用 "history.go(-1)"

angularjs - Angular JS 指令