如何用jsf reRender或ajax加载替换html内容，并将新的DOM与AngularJS重新绑定？

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范围：

在控制器上，创建一个函数来编译新的html，并绑定到相同的作用域：

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

并且，在加载后，调用它：

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

查看功能 .scope（） 。它允许为HTML元素找到正确的AngularJS范围。不需要直接使用ng-
controller指向element，可以使用ng-controller下的任何元素。

柱塞样品：柱塞