Bind value between Service and Controller/Directive

refs:

https://www.w3docs.com/snippets/angularjs/bind-value-between-service-and-controller-directive.html

angularjs 解决view和data之间的更新绑定关系。

 

Many AngularJs developers know about angularjs services, controllers and directives.As you know angularjs service is used to have global actions or variables.In general services used as global actions,because angularjs already has Value feature.

Now lets talk a little about configuration and architecture of services and controllers.Imagine you have a service which represents a person.It has all getters and setters methods.We have an another service as data manager.It gets data from anywhere every 1 minute.We have some controllers and some directives and we want to bind given data inside them.Just a simple example.We have 3 controllers and 2 directives.Some of them need to bind data and they have to use our services.Remember we have a service called Person and a service called DataManager.

What can we do to solve our problem? Let's see what we have got.

 

angular.module('myModule')
    .service('Person', function() {
         var name = 'Default';
         var listCount = 0;

         this.getName = function() {
             return name;
         };
         this.setName = function(Name) {
             name = Name;
         };

         this.getListCount = function() {
             return listCount;
         };
         this.setListCount = function(ListCount) {
             listCount = ListCount;
         };
    })

angular.module('myModule')
    .service('DataManager', function($interval, $http, Person) {
       $interval(function(){
          $http.get([url])
              .then(function(data){
                  Person.setName(data.name);
                  Person.setListCount(data.count);
              });   // getting the data every 1 minute

          }, 60000);
    })

 

The following services provide data inside any controller or directive.Now lets see how we can bind that data, for example inside controller.Here is our controller.

 

angular.module('myModule')
    .controller("MyController",function($scope, Person){
       $scope.user = null;
        // here we need live data for person

    })

 

As you see, if we wanted to print having data,we will have problem,because we can not set listener on any value to bind the data (we take the data from service).But how to do that? How to have live data inside our controller?

Here are the solutions for that problem.

 

 

Solution 1

This solution is good,if we will use the live data only in 1 controller/directive.The solution is: We can set interval inside our controller/directive and we will have a variable inside our scope,which holds the data from server.We can print that value in our view and AngularJs automatically will do that.We can even set listeners on it.It's just a very simple.Then we do not need the DataManagerservice.Here is an example:

 

angular.module('myModule')
    .controller("MyController",function($scope, Person, $interval){
       $scope.user = null;
        $interval(function(){
          $http.get([url])
              .then(function(data){
                  $scope.user.name = data.name;
                  $scope.user.count = data.count;
              });   // getting the data every 1 minute

          }, 60000);
    })

 

Maybe you thing, why do we need Person service?.In general you are right, but we can use it in our controller to update Person service data (for another components).

 

 

Solution 2

The Second solution is good, if we have many components and we need to use the service (have live data) inside many components (controller/directive).The solution is: AngularJs Events.

We can set listener on any event and when service gets a new live data from the server, it sends a signal, to say that it has a new data.We can use that event wherever we want.Lets see how we can do that.

 

angular.module('myModule')
    .service('DataManager', function($interval, $http, Person, $rootScope) {
       $interval(function(){
          $http.get([url])
             .then(function(data){
                 Person.setName(data.name);
                 Person.setListCount(data.count);
                  
                 // here we have to send signal that we have a new live data from the server

                 // we use Root Scope, because we don't know what scope architecture do we have

                 $rootScope.$broadcast("newPersonData");
             });   // getting the data every 1 minute

          }, 60000);
    })

 

As you see we can use this event wherever we want.We can set listener to this event and when service has new data, we can call Person's methods to update it.You can even send the data to 'eventName'.