javascript - 使用 AJAX 插入新内容后，如何告诉 Angular 扫描 DOM？

Question

我正在开发一个使用 AJAX 加载内容的项目，并且想要加载一些将使用 AngularJS 开发的内容。当我通过 AJAX 加载内容后，它就坐在那里——Angular 无法识别我添加的 Angular Directive(指令)。如何让 AngularJS 扫描新代码并处理它？<​​/p>

var ajaxLoad = function(obj){
  $('.target').load('dynamiclyDeterminedHTMLTarget',function(response, status, xhr){
    //Target HTML is loaded, but not parsed by Angular
  });
}

编辑:

为了完全清楚起见，我实际上加载此调用中的 Angular 内容。 Controller 位于 ajax 内容内部。见下文。

<div class='ajax-loaded-content'>
    <div ng-controller='MyNewCtrl'>
        {{ this_should_be_compiled_but_isn't }}
    </div>
</div>

我正在开发一个不使用 Angular 的“遗留”项目，并且我正在尝试将 Angular 注入(inject)其中，因为对我来说，这最有意义。

Answer 1

通过 AJAX 收到 HTML 响应后，使用 $compile针对某个范围编译/链接模板的服务。

app.controller('TestCtrl', ['$scope', '$compile', '$element', '$http',
  function ($scope, $compile, $element, $http) {
    $http.get('dynamiclyDeterminedHTMLTarget').then(function (res) {
       // inject the DOM content
       $element.html(res.data);

       // compile/link element contents
       $compile($element.contents())($scope);
    });
  }
]);

或者，您可以将 AJAX 请求交给 ngInclude指令，它将负责加载、编译、链接内容并将内容注入(inject) DOM。

<div ng-include="dynamicallyDeterminedHTMLTarget"></div>
<!-- (provided the scope has a "dynamicallyDeterminedHTMLTarget" property) -->

<小时/>

如果您在 Angular 生命周期之外发起请求，则可以 bootstrap将动态内容作为独立的 Angular 应用程序。

$('#target').load('dynamicallyDeterminedHTMLTarget', function() {
  angular.bootstrap(this, ['myApp']);
});