如何在 AngularJS 部分模板中包含第 3 方 javascript 库？

Question

我有一个简单的例子来尝试找出为什么我的角度部分模板无法加载另一个 javascript 组件。

我正在使用 1 个模板 (singleArticleView.html) 和一个父页面 (blog.html)，我正在尝试将 run_prettify.js 应用到我的模板内的一个简单代码 sn-p。如果代码在模板内，则它不起作用。如果我从子模板中删除代码和脚本标签并将它们包含在父模板中，它可以正常工作

如何在我的模板中执行该 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));

以上代码sn-p来自here。