我如何告诉angular在使用AJAX插入新内容后扫描DOM ?

Question

我正在做一个使用AJAX加载内容的项目，并且想要加载一些将使用AngularJS开发的内容。在我通过AJAX加载了内容之后，它只是呆在那里——Angular无法识别我添加的Angular指令。我如何让AngularJS扫描新代码并处理它?

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

编辑:

为了更清晰，我实际上是在加载调用中的angular内容。控制器位于 ajax内容中的。见下文.

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

我正在做一个不使用angular的"遗留"项目，我试图把angular注入其中，因为对我来说，这是最有意义的。

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指令，它将负责加载、编译、链接和将内容注入DOM。

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

---

如果你在Angular生命周期之外发起请求，你可以把动态内容作为一个独立的Angular应用来引导。

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