2014-04-22 65 views
3
Ajax的更新它的工作

我有下面的JSF + AngularJS形式:AngularJS停止後通過JSF

<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更新表單。這是如何造成的,我該如何解決這個問題?

回答

0

這裏的問題是,我們需要在Ajax調用新的HTML如下後再次編譯新的DOM:

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

功能.scope:此調用此之後

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

()允許爲HTML元素找到正確的AngularJS作用域。它不需要使用ng-controller直接指向元素,ng-controller下的任何元素都可以使用