javascript - 如何使用 Angular 有条件地将资源包含在 <head> 中

标签 javascript angularjs

我正在构建一个单页 Angular 应用程序。其中一个 View 的内容依赖于外部 JavaScript 库。

我不想在网站的每个 View 上都包含此外部 JS 资源,而只想在依赖于它的单个 View 上包含该外部 JS 资源。

根据当前 View 有条件地包含代码块的最佳方法是什么?

如果可能的话,我希望我可以放置这样的东西:

<script ng-if="view == 'view1'" type='text/javascript' src='http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js'></script>

最佳答案

因此您应该在页面中包含库脚本。

然后在绑定(bind)到它需要操作的元素的指令中进行初始化。

app.directive('unity', function () {
    return {
        link: function (scope, element, attrs) {
            // element is jQuery object when jQuery.js is included in page 
            // before angular - or it is a jQLite object similar to a jQuery object

            // config code

            u.initPlugin(element[0], "web_ovar_beta.unity3d");
        }
    }
});

View 中的用法:

<div unity></div>

这可以轻松扩展以将属性从 Controller 传递到指令

关于javascript - 如何使用 Angular 有条件地将资源包含在 <head> 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33003083/

相关文章:

javascript - 如何使用 this.$el 访问不同的元素然后根元素

ReactJS 组件内的 AngularJS 应用程序?

javascript - 将dom对象传递给angularjs中的处理函数

javascript - 不是 Angular js中的数字

javascript - 如何在窗口调整大小时更新 useRef Hook 的值

javascript - 无需滚动即可使用 Javascript 显示页面上的所有元素

javascript - 动态向下钻取嵌套的对象数组

javascript - 通过查找值 AngularJS 在数组中添加键

javascript - 是否可以为 DOM 元素而不是整个文档初始化 Angular.js?

javascript - 如何将 Ember.JS 与数据库连接?