Question

我正在构建一个单页的Angular应用程序。其中一个视图的内容取决于外部JavaScript库。

我不想在网站的每个视图中包含此外部JS资源，只是依赖于它的单个视图。

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

如果可能，我希望我可以放置这样的东西：

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

Answer 1

所以你应该在页面中包含库脚本。

然后在指向绑定到元素的指令中，它需要执行初始化。

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");
        }
    }
});

视图中的用法：

<div unity></div>

这可以很容易地扩展为从控制器

传递属性到指令

Answer 2

是

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

这是你不想做的事情。它并不能保证脚本不会被加载两次。由于脚本用于特定视图，因此请将其作为一次性解析服务

app.factory('unityResolver', function ($document, $rootScope, $q, $timeout) {
  var deferred = $q.defer();
  var script = angular.element('<script>')[0]; 

  script.src = '...';
  script.async = true;
  script.onload = script.onreadystatechange = function () {
    if (['loaded', 'complete', undefined].indexOf(script.readyState) < 0)
      return;

    script.onload = script.onreadystatechange = null;

    deferred.resolve();
    $rootScope.$apply();
  }

  script.onerror = function onerror() {
    script.onerror = null;

    deferred.reject();
    $rootScope.$apply();
  };

  $timeout(onerror, 20000);
  $document.find('head').append(script);

  return deferred.promise;
});

并在view / route resolve中使用它。

Answer 3

你想要的是不可能的。

如果你想要你可以使用Javascript来包含一个javascript文件，但是如果你使用AJAX来加载所需的内容，那么将它加载到那里将是相同的时间。但是一旦文件加载到JavaScript中就可以了，你可以从HTML中删除文件，但JavaScript引擎仍然会将该文件的内容加载到它中。

立即在您的浏览器（Chrome或带Firebug的FF）检查器中尝试：打开一个新标签，然后转到about:blank，然后将下面的代码放入控制台

var include = (function(){
   // the reference to the script
   var theScript;

   return function (filename, status){
     if(status == 'on'){
       // adding a script tag
       var head = document.getElementsByTagName('head')[0];

       theScript= document.createElement('script');
       theScript.src = filename;
       theScript.type = "text/javascript";

       head.appendChild( theScript )
     }else{
       // removing it again
       theScript.parentNode.removeChild( theScript );
     }
   }
})();

取自Remove specific <script> tag in <head> tag by onclick event

然后在检查员的控制台中

include("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", 'on')

现在检查Elements，你会看到在head标签中加载了jQuery。并在控制台中输入jQuery，您会看到function (a,b){return new n.fn.init(a,b)}

然后将其用于您的控制台

include("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", 'off')

并再次检查元素选项卡，脚本标记将会消失。然而，回到控制台并再次输入jQuery，即使您已卸载文件，也会看到function (a,b){return new n.fn.init(a,b)}，但无法从内存中删除已执行的代码。

你有2个选项，另一个框架页面被加载到iFrame中，或者如果你想使用Anagular加载View in然后只是将文件包含在你的头脑中，没有任何意义，然后在加载后将其删除它已加载

如何在Angular中有条件地包含资产

3 个答案: