AngularJS: Sharing scope behavior with sibling or descendant scope

Question

Is it possible to share scope behavior from one of my controllers higher up in my app hierarchy so that it's able to manage data from an unrelated/uninherited scope as a sort of abstract and separate 'remote control'?

This is how I have things setup in psudo-angular:

//Looking to share the ManagedScope1 and ManagedScope2 "changeChannel()" behavior with this controller
<RemoteControlCtrl>
  <ng-click="managedScope1.changeChannel()"></ng-click>
  <ng-click="managedScope2.changeChannel()"></ng-click>
</RemoteControlCtrl>

//ManagedScopes inherit ChangeChannelCtrl scope behaviors
<ChannelChangeCtrl with $scope.changeChannel() method>
  <ManagedScope1></ManagedScope1>
  <ManagedScope2></ManagedScope2>
</ChannelChangeCtrl>

The $scope.changeChannel() method is inherited in both managed scopes, and can act on their own data accordingly.

see http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs — Manuel van Rijn, Sep 13 '13 at 12:59

Ben · Accepted Answer · 2013-09-13T13:08:42.053

You need a ChannelService....

.service('ChannelService', function () {
    return {
        changeChannel: function (scopeData, callback) {
             //change the channel

             if (angular.isFunction(callback)) {
                  callback();
             }
        }
    };
});

Usage:

.controller('MyController', ['$scope', 'ChannelService', function ($scope, ChannelService) {
     $scope.dataForChangingChannel = {};
     $scope.changeChannel = function () {
          //do UI stuff here

          ChannelService.changeChannel($scope.dataForChangingChannel, function () {
                //or UI stuff here, after the channel has been changed
          });
     }
}]);

score 0 · Answer 2 · answered Sep 13 '13 at 20:53

It would depends on what kind of component that generated the scope.

If it is a completely unrelated scope, you should use $broadcast. You can require $rootScope as dependancies in remote controller and $rootScope.$broadcast('eventName', someData). In your channel controller:

$scope.$on('eventName', function(event, data) {
    // Do something here
})

Another good idea would be using a service, but that would still be hard to call method on another scope. I would say event broadcasting is a nice approach for your problem.

AngularJS: Sharing scope behavior with sibling or descendant scope

2 Answers2