如何在AngularJS部分模板中包含第三方JavaScript庫？

Question

我有一個簡單的例子，試圖找出爲什麼我的角度部分模板不能加載另一個JavaScript組件。我使用1個模板（singleArticleView.html）和一個父頁面（blog.html），我試圖將run_prettify.js應用到我的模板中的一個簡單的代碼片段。如果代碼位於模板內部，則不起作用。如果我從子模板中刪除代碼和腳本標記並將它們包含在父代中，它將正常工作

如何在模板中執行該JavaScript庫？我認爲它不工作，因爲DOM元素稍後加載。

我怎樣才能評估是否在局部模板內容，以便執行任何外部的JavaScript代碼來操作DOM已經提供？

我明白任何建議

據的代碼：

blog.html（父）

<script src="~/AngularJS/Controllers/articlesController.js"></script> 
    <script src="~/AngularJS/Controllers/singleArticleController.js"></script> 
      <div class="row"> 
        <div class="col-md-8 col-md-offset-1"> 
         <div data-ng-view> 
         </div> 
        </div> 
      </div> 

singleArticleView.html（模板）

  <script src="~/Scripts/run_prettify.js"></script> 
      <link href="~/Content/prettify.css" rel="stylesheet" /> 

         <div> 
           {{article.author }} 
           <pre class="prettyprint linenums lang-html"> 
              &lt;!DOCTYPE html&gt; 
              &lt;html&gt; 
               &lt;head&gt; 
               &lt;title&gt;Demo | Prettify.JS&lt;/title&gt; 
               &lt;/head&gt; 
               &lt;body&gt; 
               &lt;h1&gt;Hello, World!&lt;/h1&gt; 
               &lt;/body&gt; 
              &lt;/html&gt; 
           </pre> 

          </div> 

singleArticleControlle .js（控制器）

(function() { 
       var app = angular.module("dbayonaCode"); 
       var singleArticleController = function ($scope, dataService, $window, $routeParams, $sce) { 

        $scope.article = {}; 
        $scope.newComment = {}; 
        //Get the article with its comments to show in the template and add a new comment 
        //It uses ArticlesController.cs 
        dataService.getArticleById($routeParams.id) 
        .then(function (data) { 
         //success 
         $scope.article = data; 
         $scope.myContent = $sce.trustAsHtml(data.body); 

        }, 

        function() { 
         //error 
         $windows.location = "#/"; 

        }); 

       } 
       app.controller("singleArticleController", singleArticleController); 
      }()); 

Answer 1

這是angular的正常行爲，它從模板中剝離腳本標記。

我發現了一些解決方案，具體取決於您正在嘗試做什麼。如果它是一個小的腳本，你可以直接內嵌了，我很喜歡這裏該解決方案還增加了一個「懶加載」類型的腳本標籤：

/*global angular */ 
(function (ng) { 
    'use strict'; 

    var app = ng.module('ngLoadScript', []); 

    app.directive('script', function() { 
    return { 
     restrict: 'E', 
     scope: false, 
     link: function(scope, elem, attr) { 
     if (attr.type === 'text/javascript-lazy') { 
      var code = elem.text(); 
      var f = new Function(code); 
      f(); 
     } 
     } 
    }; 
    }); 

}(angular)); 

上面的代碼來自於這個帖子：AngularJS: How to make angular load script inside ng-include?

問題是它只加載腳本標記之間的文本，並且不會加載src屬性中指定的文件。

一種不同的解決方案還修改腳本指令，並允許我們通過src屬性來加載外部JS文件，或從腳本標籤之間如果src未定義：

/*global angular */ 
(function (ng) { 
    'use strict'; 

    var app = ng.module('ngLoadScript', []); 

    app.directive('script', function() { 
    return { 
     restrict: 'E', 
     scope: false, 
     link: function(scope, elem, attr) 
     { 
     if (attr.type==='text/javascript-lazy') 
     { 
      var s = document.createElement("script"); 
      s.type = "text/javascript";     
      var src = elem.attr('src'); 
      if(src!==undefined) 
      { 
       s.src = src; 
      } 
      else 
      { 
       var code = elem.text(); 
       s.text = code; 
      } 
      document.head.appendChild(s); 
      elem.remove(); 
     } 
     } 
    }; 
    }); 

}(angular)); 

上面代碼段來自here 。