在指令和控制器之間共享數據的正確方法是什麼

Question

我對AngularJS相當陌生，所以我仍然在爲我的JQuery和原生JavaScript思維方式而苦苦掙扎。

我有一個應用程序，我有3個控制器和一個自定義指令，我希望指令通知另一個控制器，而不是它自己的父級來獲取一些數據。

我想出了一個解決方案，其中有一個包含數據的變量，一個getter和setter函數以及一個變量，我在控制器中切換並在何時更新。

myApp.service('sharedService', function() { 
this.update = false; 
this.data = []; 

this.toggleUpdate = function(){ 
    if(this.update === false){ 
     this.update = true; 
    } 
    else { 
     this.update = false; 
    } 
}; 

this.getData = function() { 
     return this.data; 
}; 

this.setData = function(value) { 
    this.data = value; 
}; 
}); 

在我的指導，我只是叫sharedService.toggleUpdate（）;當我想要控制器從資源中獲取新數據時。然後，我的控制器使用$ scope。$ watch來監視我的服務中更新的更改。

myApp.controller('PlanController', ['$scope', 'sharedService', function($scope, sharedService){ 

     $scope.init = function(){ 
      //fetch data from API 
     } 

     //watch for toogling the new data 
     $scope.$watch(function() { 
      return sharedProps.update; 
     }, function(newVal, oldVal) { 
      $scope.init(); 
     }, true); 
    }); 

我希望你得到的圖片 - 這是一個正確的方式做到這一點，或者我錯過了一些更簡單的方法呢？

Answer 1

好吧所以這裏是我的答案，我不知道有關具體要求所以下面的答案僅僅是我對問題的理解：

myApp.service('sharedService', [ '$rootScope', function ($rootScope) { 
    this.update = false; 
    this.data = []; 

    this.toggleUpdate = function(){ 

    this.update = !this.update; 
    if(this.update===true){ 
     this.setData(); 
     $rootScope.$broadcast('onDataSet'); 
    } 
    }; 

    this.getData = function() { 
    return this.data; 
    }; 

    this.setData = function(value) { 
    this.data = value; 
    }; 
}]); 

myApp.controller('PlanController', ['$rootScope', '$scope', 'sharedService', function($rootScope, $scope, sharedService){ 

    $scope.init = function(){ 
     //fetch data from API 
    } 

    // Each controller would have this, rather than the $watch 
    $rootScope.$on('onDataSet', function() { 
     // Shared Service has been updated so let's get the data 
     $scope.myObj = sharedService.getData(); 
    })  
}); 

讓我知道這是否正是你要。

Answer 2

@alexc是在暗示我還能做什麼，這裏有一個例子：

myApp.service('sharedService', function ($rootScope) { 

    this.update = false; 
    this.data = []; 

    this.toggleUpdate = function() { 
     this.update = !this.update; 
    }; 

    this.getData = function() { 
     return this.data; 
    }; 

    this.setData = function(value) { 
     this.data = value; 
     // The data has been set so let's let everyone know 
     $rootScope.$broadcast('dataSet'); 
    }; 
}); 

控制器：如果這對你的作品請向@alexc發佈的答案和接受

myApp.controller('PlanController', ['$rootScope', '$scope', 'sharedService', function($rootScope, $scope, sharedService){ 

    $scope.init = function(){ 
     //fetch data from API 
    } 

    // Each controller would have this, rather than the $watch 
    $rootScope.$on('dataSet', function() { 
     // Shared Service has been updated so let's get the data 
     $scope.myObj = sharedService.getData(); 
    })  
}); 

他。

Here is a good little page to visit to get more information