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

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
}

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

Answer 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下的任何元素都可以使用