Bind a service variable to a directive?

Question

I have a controller that contains a function that receives some data from the server. I store this data in a service variable. This service is then introduced into the directive. I want the directive to be automatically updated whenever this function is called and the data is updated.

My controller:

angular .module('myApp') .controller('myCtrl', ['$scope', 'SomeService', function($scope, SomeService) { $scope.update = function() { SomeService.myValue = 100; } }]); 

Directive:

 angular.module('myApp') .directive('myDirective', ['SomeService', function(SomeService) { return { templateUrl : 'views/myDirective.html', restrict : 'E', scope : false, controller : function($scope) { this.myValue = SomeService.myValue; } }; }]); 

Template:

 <div> {{ myValue }} </div> 

The update function is called at the click of a button and updates myValue to a new value. I want it to be automatically reflected in the directive.

Plunk: http://plnkr.co/edit/OUPzT4MFS32OenRIO9q4?p=preview

Answer 1

Please see the working demo below.

 var app = angular.module('app', []); app.controller('MainCtrl', function($scope, SomeService) { $scope.name = SomeService.data; $scope.update = function() { $scope.name.myValue += 1; } }); app.factory('SomeService', function() { var data = { myValue: 0 }; return { data: data } }); app.directive('myDirective', ['SomeService', function(SomeService) { return { templateUrl: 'myDirective.html', restrict: 'EA', scope: false, link: function(scope, elem, attr) { scope.data = SomeService.data } }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="MainCtrl"> <p>My Value: {{name.myValue}}</p> <button ng-click="update()">Click</button> <hr/> <div my-directive></div> <script type="text/ng-template" id="myDirective.html"> <h3>My Directive</h3> <p>Value: {{data.myValue}}</p> </script> </div> </div> 

Answer 2

You can try adding the service link directly to the directive.

Directive:

 angular.module('myApp') .directive('myDirective', ['SomeService', function(SomeService) { return { templateUrl : 'views/myDirective.html', restrict : 'E', scope : false, controller : function($scope) { this.SomeService = SomeService; } }; }]); 

Template:

 <div> {{ SomeService.myValue }} </div> 

Edit: I went through your plunker and finally got his job.

You can check the updated code here

Answer 3

@RutwickGangurde and others who have problems, if you try to set a scope variable that is not an object, it will not work. I assume what you are doing in your service now:

 ... this.myVar = true; ... 

and then try to install it in the directive / controller:

 ... scope.myVar = myService.myVar; ... 

This will NOT work to get the updated variable in the service when it changes.

Try this in your service:

 ... this.myObj = {}; this.myObj.myVar = true; ... 

and in your directive / controller:

 ... scope.myValue = myService.myObj; ... 

and in your html:

 ... {{ myValue.myVar }} ... 

I would do it as a comment, but I do not have sufficient privileges, but I decided to publish it as an answer with a very brief example.