從工廠更新指令

Question

我有一個指令，顯示從使用工廠的服務中檢索的列表。主控制器更新服務使用的id以獲取所需的列表。我需要在發生這種情況時更新指令，並且似乎無法使其工作，也許我使用了錯誤的方法。這是我的代碼：

Chat.service('SubscriberService', ['User', function(User){ 
    this.subscribers = []; 
    this.id = -1; 

    this.updateSubscriberList = function(id){ 
     console.log("fetching data"); 
     this.id = id 
     this.subscribers = User.fetch({ id: this.id }); 
    } 

    this.getSubscribers = function(){ 
     return this.subscribers; 
    } 
    return this; 
}]); 

Chat.directive('subscribersList', function(SubscriberService){ 
    return { 
     restrict: 'E', 
     templateURL: 'angular/templates/subscribers_list.html', 
     controller: function($scope){ 

     $scope.subscribers = SubscriberService.getSubscribers(); 

      $scope.$watch('subscribers', function(value){ 

      console.log("watch triggered"); 
      $scope.subscribers = SubscriberService.getSubscribers();  

      }); 
     } 
    } 
}); 

Chat.controller('MainCtrl', function($scope, $stateParams, SubscriberService){ 
    var id = $stateParams.id; 

    //update the current id when the URL changes 
    SubscriberService.updateSubscriberList(id); 

}); 

任何想法？我需要MainCtrl來更新服務中的id，並且當服務獲取新信息時，該指令更新視圖。

謝謝。

Answer 1

正如artur grzesiak在評論中指出的那樣，$scope.subscribers的價值永遠不會更新。而是將變量this.subscribers設置爲服務中的新值，這意味着它們包含不同的對象。

相反，你可以使用這個服務：

Chat.service('SubscriberService', ['User', function(User){ 
    this.subscribers = []; 
    this.id = -1; 
    var self = this; 

    this.updateSubscriberList = function(id){ 
     console.log("fetching data"); 
     this.id = id 
     User.fetch({ id: id }, function(result) { 
      // Removed the original data and replaces it with the result. 
      // This keeps the reference to the original object the same. 
      // Use self, because I'm not sure where `this` refers to in this context. 
      angular.copy(result, self.subscribers); 
     }); 
    }; 

    this.getSubscribers = function(){ 
     return this.subscribers; 
    }; 
    return this; 
}]);