如何有条件地将资产包括在<头部>使用Angular

How to conditionally include assets in the <head> with Angular

本文关键字：头部 lt gt Angular 使用 包括 有条件      更新时间：2023-09-26

我正在构建一个单页的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>

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

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

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>

这可以很容易地扩展为将属性传递给来自控制器的指令

这是

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

并在视图/路由CCD_ 1中使用它。

你想要的是不可能的。

如果你想的话，你可以让Javascript包含一个Javascript文件，但是如果你使用AJAX加载所需的内容，把它留在那里，那么加载的时间是一样的。但是一旦一个文件被加载到JavaScript中，它就完成了，你可以从HTML中删除该文件，但JavaScript引擎仍然加载了该文件的内容

现在就在浏览器(chrome或FF with Firebug(检查器中试用：打开一个新的选项卡并转到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<脚本>标签在<头部>点击事件标记

然后在你的检查员控制台

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

现在检查Elements，您将看到在pages-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)}，即使您已经卸载了文件，也无法从内存中删除执行的代码。

你有两个选项，另一个框架页面加载到iFrame中，或者如果你想使用Anagular加载视图，那么只需将文件包含在你的脑海中就没有意义了，然后将其删除，因为一旦加载，它就会加载

相关文章：