ajax通过JSF更新AngularJS后，AngularJS停止工作

Question

我有以下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
}

当第一次呈现页面时，此操作有效。但是它在点击"编辑"按钮后停止工作，ajax通过JSF更新表单。这是怎么造成的，我该如何解决？

Answer 1

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

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

在这个呼叫之后：

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

函数.scope（）允许为HTML元素找到正确的AngularJS作用域。它不需要直接指向带有ng控制器的元素，ng控制器下的任何元素都可以使用