AngularJS와 지침 범위는 링크 기능에 즉시 채워지지 바인딩 나는 다음과 같은 지침을 쓰고 있어요

Question

:

.directive('mypagination', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      pageCount: "=", 
     }, 
     template: "{{pageCount}}", 
     link: function ($scope, $element, $attrs) { 
      $scope.pages = []; 
      for (var i = 1; i <= $scope.pageCount; i++) { 
       $scope.pages.push(i); 
      } 
     } 
    } 
}) 

내 문제는 템플릿의 for 루프를 0으로 설정 내부 $scope.pageCount하지만 {{pageCount}}가 렌더링되는 것입니다 올바른 값.

<mypagination page-count="mjaController.pages.length" 
       on-page-change="mjaController.fetchStuff(page)"> 
</mypagination> 

왜 pageCount의 값이 link 함수 내에서 0이 될 것입니다,하지만 페이지에서 제대로 렌더링 :

는 HTML에서 지시자는 다음과 같이 호출되고? 당신의 link 기능이 내가 API에서 검색 추측 async 호출입니다 mjaController.pages.length 속성에 바인딩되어 있기 때문에 0을 할 수있는 시간 pageCount에서 실행되는

Answer 1

. mjaController.pages이 일부 데이터로 채워지면 pageCount은 길이로 설정되고 $digest주기를 통해 template에 표시되지만 link 함수는 다시 실행되지 않습니다.

.directive('mypagination', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      pageCount: "=", 
     }, 
     template: "{{ pages()|json }}", 
     link: function ($scope, $element, $attrs) { 
      $scope.pages = function() { 
       var pages = []; 
       for (var i = 1; i <= $scope.pageCount; i++) { 
       pages.push(i); 
       } 
       return pages; 
      } 
     } 
    } 
}) 

는 $scope에 method를 추가하고 템플릿에 반환 값을 사용하여 다음을 수행 예상대로 작동하도록합니다. 일반적으로

.directive('mypagination', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      pageCount: "<", 
      onPageChange: "&" 
     }, 
     template: "{{pageCount}}", 
     link: function (scope, elem, attrs) { 
      scope.$watch("pageCount", function(newValue) { 
       if(newValue) 
        scope.pages = []; 
        for (var i = 1; i <= newValue; i++) { 
         scope.pages.push(i); 
        } 
       } 
      }); 
     } 
    } 
}) 

는 데이터 manupulation 이러한 유형의 life-cycle hooks 같은 $onChanges 등을 활용하는 지시어의 컨트롤러에서 수행해야합니다 : 데이터가 서버로부터 도착할 때까지

Answer 2

사용 $watch 기다려야합니다. 자세한 내용은 AngularJS Developer Guide - Component-based Application Architecture을 참조하십시오.