jquery - 如何用jsf reRender或ajax加载替换html内容，并用AngularJS重新绑定(bind)新的DOM？

Question

考虑一些代码:

<div id="dest">
  <p>Original Content</p>
  <p>Some data</p>
  <ul>
    <li ng-repeat="i in items">{{i.name}}</li>
  </ul>
</div>

或者，使用 jsf，面板:

<h:panelGroup id="dest">

Angularjs 会理解指令 ng-repeat，然后，它将用项目列表替换标签

。

但是，如果您的 html 通过 ajax 加载或 jsf reRender 发生了更改，则 AngularJS 不会识别新内容:

$('#dest').load('replace.html');

Answer 1

我们需要为新 DOM 编译并应用 AngularJS 范围:

在 Controller 上，创建一个函数来编译新的 html，并绑定(bind)到相同的范围:

$scope.compileDOM = function($el) {
    ($compile($el))($scope);
    $scope.$apply();
};

加载后，调用它:

$('#dest').load('replace.html', function() {
    $dest.scope().compileDOM($dest);
});

查看函数.scope()。它允许为 HTML 元素找到正确的 AngularJS 范围。不需要直接指向ng-controller的元素，ng-controller下的任何元素都可以使用。

Plunker 样本:PLUNKER