jquery – 如何用jsf reRender或ajax加载替换html内容,并用AngularJS重新绑定新的DOM？

考虑一下代码：

<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,然后它将替换标签< li>按项目清单.

但是,如果您的html已更改,通过ajax加载或通过jsf reRender,AngularJS将无法识别新内容：

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

解决方法

我们需要为新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的元素,可以使用ng-controller下的任何元素.

Plunker样品：PLUNKER