如何用jsf reRender或ajax加载替换html内容，并用AngularJS重新绑定新的DOM? [英] How to replace a html content with jsf reRender or ajax load, and rebind the new DOM with AngularJS?

问题描述

考虑一些代码:

<p>原始内容</p><p>一些数据</p><ul><li ng-repeat="i in items">{{i.name}}</li>

或者，使用 jsf，一个面板:

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

Consider a bit of code:

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

or, using jsf, a panel:

<h:panelGroup id="dest">

Angularjs will understand the directive ng-repeat, and then, it will replaces the tag <li> by items list.

But, if your html has changed, by an ajax load, or by a jsf reRender, the new content doesn't will be recognized by AngularJS:

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

解决方案

We need to compile and apply the AngularJS scope for the new DOM:

On controller, create a function to compile a new html, and bind to same scope:

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

And, after load, call it:

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

Look to the function .scope(). It allows to find a correct AngularJS scope for a HTML element. It doesn't need to point directly to element with ng-controller, any element under the ng-controller can be used.

Plunker sample: PLUNKER

这篇关于如何用jsf reRender或ajax加载替换html内容，并用AngularJS重新绑定新的DOM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！