javascript - 通过 ajax 加载 AngularJS 问题

Question

在我的应用程序中，其中一个自定义小部件使用了 Angular 功能。

在其中一个页面中，它是通过 ajax 呈现的，即以下内容是通过 ajax 获取并正确插入到 DOM 中的:

_abc.html:

<script type="text/javascript">console.log(1);</script>

<script type="text/javascript" src="/assets/angular.js"></script>
<script type="text/javascript">console.log(2);</script>

<script type="text/javascript" src="/assets/angular-ui-router.js"></script>
<script type="text/javascript">console.log(3);</script>

<script type="text/javascript" src="/assets/my_widget.js"></script>
<script type="text/javascript">console.log(4);</script>
<div class="ng-app: my_widget;" id="my_widget">
.....
.....
</div>

问题是:当这个 html 通过 ajax 放入页面时，只有第一个控制台日志被打印出来，而不是其他的。因此在调用获取 angular.js 之后没有调用任何东西，但是通过 ajax 正确获取了 angular.js 而没有任何错误。

请注意，当上面的 html 直接放置在页面加载而不是通过 ajax 时，一切都按预期正常工作。

Answer 1

以这种方式加载 Angular 小部件有几个问题:

1. 您需要以正确的顺序和范围加载和执行 _abc.html 中定义的脚本；
2. 您应该手动 bootstrap使其工作的 Angular 模块(因为 ng-app 仅适用于一个模块，并且仅在文档就绪时触发事件，因此它不适合动态加载的内容)；

这是我如何解决这些问题的示例(请参阅 JavaScript 部分中的评论):http://plnkr.co/edit/ClLvhvL5435yUKOHHO1U?p=preview

index.html

...
<div id="content"></div>
...

JavaScript

$(function() {

  function loadAngularPage(url, target) {
    $.ajax(url, {
      dataType: 'html',
      type: 'GET'
    }).done(function(data) {
      var el, div = document.createElement('div'); // Create detached HTML fragment 
      div.innerHTML = data; // Populate temporary detached fragment with received HTML
      function next() {
        if(el = div.firstChild) {
            target.appendChild(el);
            if(el.tagName === 'SCRIPT') {
              if(el.hasAttribute('src')) {
                $.getScript(el.getAttribute('src'), next); // Wait until script is loaded and executed and only then process next element
              } else {
                eval(el.innerHTML); // Evaluate embedded scripts
                next();
              }
            } else {
              next();
            }
        } else {
          var match = /ng-app[:=]['"]?\s*([^;'" ]*)/gim.exec(target.innerHTML); // Get the name of angular's module to be bootstraped
          if(match && match.length === 2) {
            angular.bootstrap(target, [match[1]]); // bootstrap angular module
          }
        }
      }
      next(); // Start to process elements one by one
    });
  }

  loadAngularPage('_abc.html', document.getElementById('content')); // Load angular page

});

注意:注意 /ng-app[:=]['"]?\s*([^;'"]*)/ 不仅涵盖了以下流程ng-app 定义在某些元素的 class 中，但也有其他定义主 Angular 模块的方式(如 ng-app, x-ng-app、data-ng-app 属性等)。另请注意，Angular 模块是在加载内容的容器内引导的，而不是加载内容内的原始元素。

_abc.html

<script type="text/javascript">console.log(1);</script>

<script type="text/javascript" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script type="text/javascript">console.log(2);</script>

<script type="text/javascript" src="angular-ui-router.min.js"></script>
<script type="text/javascript">console.log(3);</script>

<script type="text/javascript" src="my_widget.js"></script>
<script type="text/javascript">console.log(4);</script>

<div class="ng-app: my_widget;" id="my_widget">
  Plain Text
  <div my-directive></div>
</div>

my_widget.js

angular.module('my_widget',['ui.router']).
  directive('myDirective', function() {
    return {
      template: '<div>My angular directive is working fine</div>'
    }
  });