지시어와 컨트롤러간에 데이터를 공유하는 적절한 방법은 무엇입니까

Question

저는 AngularJS에 대해 매우 익숙합니다. 그래서 저는 여전히 JQuery와 기본 자바 스크립트 방식으로 고심하고 있습니다.

나는 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); 
    }); 

나는 그림을 얻길 희망합니다.이 작업을 수행하는 적절한 방법입니까, 아니면 더 쉬운 방법이없는 것입니까?

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'); 
    }; 
}); 

컨트롤러 :

Answer 1

좋아, 그래서 여기에 내가 정확한 요구 사항에 대한 확실하지 않다, 내 대답이다 : 그 s의 경우

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 내가 무엇을 할 것이라고 제안하고, 여기에 예입니다 이것이 당신이 대답을 게시하고 받아들이 @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