javascript - AngularJS 通过 ajax 加载问题

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 后不会调用任何内容，但是 Angular.js 是通过 ajax 正确获取的，没有任何错误。

请注意，当上面的 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>'
    }
  });