AngularJS 在通过 JSF 进行 ajax 更新后停止工作答案

【问题标题】：AngularJS stops working after ajax-updating it via JSFAngularJS 在通过 JSF 进行 ajax 更新后停止工作
【发布时间】：2014-04-22 06:51:39
【问题描述】：

我有下面的 JSF + AngularJS 表单：

<h:form id="fmMain1" enctype="multipart/form-data" prependId="false">
    <p:commandButton value="Edit" action="#{testBean.updateMode}"
        update="@form" process="@form"/>

    <h:panelGrid rendered="#{testBean.mode eq 'EDIT'}">
        <input ng-show="true" type="text" ng-model="sometext" />
        <h1>Hello {{ sometext }}</h1>
    </h:panelGrid>

    <h:panelGrid rendered="#{testBean.mode eq 'VIEW'}">
        <input ng-show="true" type="text" ng-model="sometext" />
        <h1>Hello {{ sometext }}</h1>
    </h:panelGrid>
</h:form>

使用这个托管 bean：

public class TestBean {

    private String mode = "VIEW";

    public void updateMode(){
        if(mode.equals("VIEW"))
            mode="EDIT";
        else
            mode="VIEW";
    }

    // +getter+setter
}

这在第一次呈现页面时有效。但它在单击“编辑”按钮后停止工作，该按钮通过 JSF ajax 更新表单。这是如何引起的，我该如何解决？

【问题讨论】：

标签： angularjs jsf primefaces

【解决方案1】：

这里的问题是我们需要在ajax调用新的html之后再次编译新的DOM，如下所示：

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

在此之后调用：

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

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

【讨论】：