각도 ui.bootstrap 페이지 매김 - 현재 페이지가 업데이트되지 않음/작동하지 않음

Question

안에 dialog 두 지시문이 모두 ui.bootstrap입니다. 문제는 $watch이 currentPage 멤버에서 작동하지 않는다는 것입니다.

이제 유사한 코드는 페이지 매김이 일부 대화 상자 안에 있지 않은 다른 페이지에서도 완벽하게 작동합니다.

나는이 문제는 $scope 관련되어 생각하지만 currentPage는 범위에서 사용할 수 있습니다 그리고 난 {{currentPage}}

가 plunker

$scope.$watch('currentPage')의 코드를 찾아주세요 사용하여 템플릿을 발사되지를 표시 할 수 있습니다 클릭하여 페이지 링크를 클릭하십시오.

이제 회피 방법으로 페이지 번호 지정에서 제공하는 콜백 on-select-page을 사용할 수 있습니다.

예컨대

<pagination on-select-page="pageChanged(page)" total-items="totalItems" items-per-page = "numPerPage" page="currentPage" max-size="maxSize"></pagination> 

과 내가 가질 수 내 컨트롤러 내부

,

$scope.pageChanged = function(page) { 
    console.log(page);  
}; 

하지만 오히려 이러한 경우에 왜 $scope.$watch 실 거예요 작업을 이해할 필요가있다.

업데이트 :

가

... page="$parent.currentPage" ... 

또는 적절한 솔루션 : 중첩 된 범위 바인드 관련된

당신은 바르 다음 콘솔에서 는

$$watchers: Array[1] 
0th: Object 
    eq: false 
    exp: "currentPage" 
    fn: function (o,n){} 

Answer 1

사용하는 전문가 값을이다 수준이 깊음 :

$scope.data.currentPage = ... 

자세한 here

예를 들어 당신이 TestCtrl 컨트롤러 내부의 새로운 컨트롤러 (ModalDialogBaseCtl)를 만드는 때문에 here

Answer 2

는 각도는 부모로부터 모든 속성을 상속하는 새 범위를 만듭니다.

나를 의심스럽게 생각하는 선은 ModalDialogBaseCtrl 시작 부분에 $ scope.currentPage에 값을 할당하는 곳입니다. Angular는 새로운 범위에서 currentPage라는 새 변수를 선언 할 때이를 해석합니다. 그러나 페이지 매김 컨트롤은 MainCtrl의 currentPage 변수에 첨부되어 있으므로 ModalDialogBaseCtl이 아무 것도하지 않는 것을 볼 수 있습니다 (값을 변경하지 않음).

하나의 수정은 Max가 제안하는대로 $ parent를 사용하는 것이지만 훌륭한 구조는 아닙니다. 대신, currentPage 속성이 두 개가 아닌 한 개만있는 방법을 찾으십시오.