Communicating between controllers in AngularJs

前端 未结 2 1142
说谎
说谎 2021-01-21 16:06

I have a simple question: what\'s the best (\'cleanest\', \'scaleable\') path one should go when it comes to interact between (let\'s say) two controllers. Would that be to defi

相关标签:
2条回答
  • 2021-01-21 16:31

    Use service to share data between controllers

    Your case is trying to share data between controllers, rather than watch service's value in controllers, I think directly reference service object to controller's scope is a better way

    So your view can be

     <pre ng-controller="cntrl1">Value in cntrl1: {{ myService.value }} <button ng-click="update('value1')">Change to 'value1'</button></pre>
    
      <pre ng-controller="cntrl2">Value in cntrl2: {{ myService.value }} <button ng-click="update('value2')">Change to 'value2'</button></pre>
    

    and change your controllers to

    app.controller('cntrl1', function(myService, $scope) {
      $scope.myService = myService;
      $scope.update = function(str) {
        $scope.myService.setValue(str);
      }
    });
    
    app.controller('cntrl2', function(myService, $scope) {
      $scope.myService = myService;
      $scope.update = function(str) {
        $scope.myService.setValue(str);
      }
    });
    

    Use $broadcast/$emit

    Just as @squiroid points out, you can use $broadcast to broadcast events to any controllers who is monitoring targeted events.

    Please note here, you'd better not use $rootScope.$broadcast + $scope.$on but rather $rootScope.$emit+ $rootScope.$onas $broadcast event will bubble down through all descendant scopes, which might lead to serious performance problems.

    0 讨论(0)
  • 2021-01-21 16:31

    This is the best way to communicate b/w the controller sharing same data via sevice but it is limited b/w controllers having the same service:-

    Instead you can also choose to broadcast events that are captured by other controllers and change that data accordingly this way is more scaleable but not clean :-)

    Sender ctrl :-
    $rootScope.$broadcast('update', 'Some data'); //method that lets pretty much everything hear it even $scope too.
    

    or

    $rootScope.$emit('update', 'Some data');// only lets other $rootScope listeners catch it 
    

    Listen Ctrl :-

       $rootScope.$on('update', function (event, data) {
            console.log(data); // 'Some data'
          });
    
    0 讨论(0)
提交回复
热议问题