AngularJS : 지시어와 스코프

Question

나는 아주 간단한 해결책이 있다고 생각하는 간단한 질문을 가지고 있지만 어떻게 든 그것을 놓치고있다.

내 앱에 간단한 지시문을 설정하고 있습니다. 내 컨트롤러의 범위를 공유하기를 원하기 때문에 범위 속성을 기본값 인 "false"로 설정합니다.

문제는 해당 범위에 액세스 할 수없는 것입니다.

console.dir(scope) 

을하고 난 범위 객체 ('페이지') 후 오전 속성을 볼 수 있습니다 내 연결 기능에서

, 나는 할 수 있습니다.

내가 수행하려고 할 경우

console.dir(scope.pages) 

하지만, 다시로 정의되어 있습니다.

무엇이 누락 되었습니까?

미리 감사드립니다.

MyDirectives.directive("mdPagination", function(){ 
    return { 
     templateURL: "/templates/pagination.html", 
     replace: true, 
     restrict: 'A', 
     scope: false, //default 
     link: function(scope, element, attrs){ 
      console.log('in linking function'); 
      console.dir(scope); 
      console.dir(element); 
      console.dir(attrs); 
      console.dir(scope.pages); 
     } 
    } 
}); 

템플릿 :

<nav class="pagination" md-Pagination></nav> 

컨트롤러 :

App.controller('MachinesListCtrl', function ($scope, $routeParams, $location, MachineServices, CustomerServices) { 

    var page = ($routeParams.page ? $routeParams.page : 1); 

    //if we are getting all machines based on their customer id. 
    if($routeParams.customerID){ 
     MachineServices.getByCustomerId($routeParams.customerID).then(function (data) { 
      _.each(data.results, function (machine, index, list) { 
       CustomerServices.get(machine.customer_id).then(function(data){ 
        machine.CustomerData = data.results; 
       }); 
      }); 

      $scope.Machines = data.results; 
      $scope.pages = data.pages; 
     }); 
    } 
    //otherwise we just want the regular list of machines. 
    else{ 
     MachineServices.query(page).then(function (data) { 
      _.each(data.results, function (machine, index, list) { 
       CustomerServices.get(machine.customer_id).then(function(data){ 
        machine.CustomerData = data.results; 
       }); 
      }); 

      $scope.Machines = data.results; 
      $scope.pages = data.pages; 
     }); 
    } 
}); 

Answer 1

코드의 문제는 : MachineServices.getByCustomerId 및 MachineServices.query는 비동기 있습니다. 이러한 함수를 호출 할 때, 서버에서 데이터가 아직 도착

$scope.Machines = data.results; 
    $scope.pages = data.pages; 

아직를 호출되지 않습니다이 줄하지 않습니다.

링크 기능의 범위는 상위 범위에 바인딩됩니다. link 함수가 호출 될 때, 부모의 scope.pages 는 여전히 우리가 작업 할 때

는 각 데이터 바인딩, 우리는 그냥 수신, 수동해야한다 (때문에 asyn에) 정의되지 우리의 코드 은 바운드 속성이 값을 가지거나 업데이트 된 값을 가질 때을 알지 못하고 모를 것이기 때문에 그에 따라 변경하고 이에 따라 반응합니다 (예 : $ watch 사용).Let angular notify us the changes

Answer 2

당신의 지시로 범위를 주입하십시오.

http://jsfiddle.net/roadprophet/PfEaz/

MyDirectives.directive("mdPagination", function(){ 
    console.log('BLAH'); 
    return { 
     template: "<h1>BLAH!</h1>", 
     replace: true, 
     restrict: 'A', 
     scope: false, //default 
     link: function(scope, element, attrs){ 
      console.log('in linking function'); 
      console.dir(scope); 
      console.dir(element); 
      console.dir(attrs); 
      console.dir(scope['pages']); 
     } 
    } 
}); 

I 통지가 컨트롤러에 $ 범위를 주입하고 :

MyDirectives.directive("mdPagination", function($scope){... 

Answer 3

여기 잉 1.2 작동 코드이다.

Answer 4

컴퓨터 서비스에 각도 $ 리소스가 사용 된 것 같습니다. 맞습니까? 그러면 결과에 대한 빈 객체 또는 배열이 만들어져 나중에 호출이 비동기 적으로 완료 될 때 결과로 채워지도록 바인딩 할 수 있습니다. link이 각도로 호출되면 아직 데이터로 채워지지 않습니다.

먼저 query 및 getByCustomerId 호출에 로깅을 추가하여 값을 가져오고 범위의 속성을 올바르게 설정하는지 확인하십시오. 템플릿의 어딘가에 {{pages|json}}을 추가하면 변경된 페이지의 JSON을 볼 수 있습니다. 그런 다음 변경 사항이있을 때 특별한 조치를 취해야 할 경우 지시문에서 해당 속성을 볼 수 있습니다.

MyDirectives.directive("mdPagination", function(){ 
    return { 
     templateURL: "/templates/pagination.html", 
     replace: true, 
     restrict: 'A', 
     scope: false, //default 
     link: function(scope, element, attrs){ 
      console.log('in linking function'); 
      console.dir(scope); 
      console.dir(element); 
      console.dir(attrs); 
      console.dir(scope.pages); 

      // watch pages for changes 
      scope.$watch('pages', function(value) { 
       console.log("pages now has this value:"); 
       console.dir(scope.pages); 
      }); 
     } 
    } 
});