CODEWITHSUNDEEP
angularjs
runtimeZero
runtimeZero

Reputation: 28086

Directive to directive communication using a service

I am attempting to perform the following. Use one directive to set information in a service. Use another directive to retrieve information from this service. The directive setting the information seems to be doing it's job fine, however the one receiving the information does not react to it.

Below are how the directives look:

app.service('theStore',function(){
  this.data;
});

app.directive('theOneThatSets', ['theStore', function(theStore){
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      element.click(function(event){
        theStore.data = attrs.val;
      });
    }
  };

}]);

app.directive('theOneThatReads', ['theStore', function(theStore){
  return {
    restrict: 'E',
    template: '<stong>Received Text is - {{receivedValue}}</strong>',
    link: function(scope, element, attrs) {
      scope.$watch('theStore.data',function(newVal){
        scope.receivedValue = theStore.data;
      });
    }
  };

}]);

plnkr here: http://plnkr.co/edit/9EMIwhUcneQoopNqqWtV

Upvotes: 0

Views: 60

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

I don't know if you can do watchers on things that are not in scope. The best way to communicate between controllers/services/directives is to use $rootScope, $broadcast, and $on.

Example using your code:

    app.directive('theOneThatSets', ['$rootScope', function(theStore){
      return {
        restrict: 'E',
        link: function(scope, element, attrs) {
          element.click(function(event){
            //theStore.data = attrs.val;
            $rootScope.$broadcast('changeThisValue', attrs.val); // Send
          });
        }
      };

    }]);

    app.directive('theOneThatReads', [function(theStore){
      return {
        restrict: 'E',
        template: '<stong>Received Text is - {{receivedValue}}</strong>',
        link: function(scope, element, attrs) {
          scope.$on('changeThisValue', function($event, value){
              scope.receivedValue = theStore.data;
          });
        }
      };
    }]);

also, try creating a listener in your service like so:

    app.service('myservice',function(){
        this.listen = function($scope) {
            $scope.$watch(function(){return someScopeValue},function(){
               //$scope.dosomestuff();
            });
        }
    });

    //your controller

    function myCtrl($scope,myservice) {
        $scope.listen = function() {
            myservice.listen($scope);
        }

        //call your method
        $scope.listen();
    }

Upvotes: 1

Related Questions