如何替换HTML内容使用JSF重新呈现或AJAX负载，并重新绑定新的DOM与AngularJS？ [英] How to replace a html content with jsf reRender or ajax load, and rebind the new DOM with AngularJS?

问题描述

考虑了一下code：

 ＆LT; D​​IV ID =DEST＆GT;
  ＆LT; P＆GT;原含量小于/ P＆GT;
  ＆LT; P＆GT;一些数据和LT; / P＆GT;
  ＆LT; UL＆GT;
    ＆LT;李NG重复=我的物品＆GT; {{i.name}}＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

，或使用JSF，面板：

 ＆LT; H：panelGroup中的id =DEST＆GT;
 

Angularjs就会明白一起的指令NG重复，然后，它会替换标签＆lt;李＆GT;通过项目列表。

但是，如果您的HTML发生了变化，由一个ajax负载，或由一个JSF重新呈现，新内容不将由AngularJS确认：

  $（'＃DEST）的负载（'replace.html'）。
 

解决方案

我们需要编译和应用AngularJS范围为新的DOM：

在控制器上，创建一个函数来编写一个新的HTML，并绑定到相同的范围：

  $ scope.compileDOM =功能（$ EL）{
    （$编译（$ EL））（$范围）;
    $范围$适用（）。
};
 

和，加载后，调用它：

  $（'＃DEST）。负载（replace.html'，函数（）{
    $ dest.scope（）compileDOM（$ DEST）。
}）;
 

看向功能的 .scope（）。它可以找到一个正确的AngularJS范围为HTML元素。它并不需要直接指向元件与纳克控制器，所述纳克控制器的任何元素都可以使用。

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

这篇关于如何替换HTML内容使用JSF重新呈现或AJAX负载，并重新绑定新的DOM与AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！