AngularJS：指令和范围

Question

我有一个简单的问题，我认为有一个非常简单的解决方案，但不知何故，我错过了它。

我为我的应用程序设置了一个简单的指令。我将scope属性设置为默认值“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

尝试注射范围到你的指令。

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

Answer 3

这里是伍1.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']); 
     } 
    } 
}); 

通知我注入$范围到控制器。

Answer 4

看起来你正在为MachineServices使用角度$资源，对吧？这会为您的结果创建一个空对象或数组，以便您可以立即将其绑定到该对象或数组，以便稍后在调用异步完成时填充结果。当按角度调用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); 
      }); 
     } 
    } 
});