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
}

第一次呈现页面时，此功能正常。但点击＆＃34;编辑＆＃34; ajax的按钮 - 通过JSF更新表单。这是怎么造成的，我该如何解决？

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下的任何元素

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

1 个答案: