Share data between controllers using Service AngularJs 1.6.1

问题

Background

I am making a census app about gnomes. This app shows a list of all gnomes and allows you to filter it.

Problem

The problem is that the filter is not working! My gnome-filter controller cannot communicate with the gnome-list controller. To solve this problem I tried creating a service by reading this answer in StackOverlflow:

https://stackoverflow.com/a/21920241/1337392

However, after creating what I believe to be a fine replica of the answer, it is still not working.

Code

When the app first loads, gnome-list makes a request to the gnome census server to get all the gnomes and show them.

However, there are a lot of gnomes, so I offer you the option to filter them and only get those with read hair, by using the gnome-filter.

Unfortunately, even though I make a request to the server, and I get an answer, my service is not working...

/*global angular*/

(function() {
  var app = angular.module("census", []);

  app.controller("gnomeFilter", function(DataShareServ) {
    var self = this;
    self.listServ = DataShareServ;
    self.makeRequest = function() {
      self.listServ.request({
        hairColor: "red"
      });
    };
  });

  app.controller("gnomeList", function(DataShareServ) {
    var self = this;
    self.listServ = DataShareServ;
    self.listServ.request();
    self.list = self.listServ.data;
  });

  // Create the factory that share the Fact
  app.factory('DataShareServ', function($http) {
    var self = this;
    self.list = {};

    self.list.data = [];

    self.list.request = function(params) {
      var theUrl = 'https://gnome-shop-fl4m3ph03n1x.c9users.io/api/v1/gnomes';
      if (params.hairColor)
        theUrl = theUrl + "?hairColor=" + params.hairColor;

      $http({
        method: 'GET',
        url: theUrl,
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        }
      }).then(function successCallback(response) {
        self.list.data = response.data.entries;
        console.log("submitted");
      }, function errorCallback(response) {
        console.log('Error: ' + response);
      });
    };

    return self.list;
  });

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body>
  <!-- Search functionality -->
  <form ng-controller="gnomeFilter as filterCtrl" ng-submit="filterCtrl.makeRequest()">
    <button type="submit">Get Reddies !!</button>
  </form>

  <!-- Gnomes list -->
  <div ng-controller="gnomeList as listCtrl">
    <ul>
      <li ng-repeat="gnome in listCtrl.list">
        {{gnome.name}}
      </li>
    </ul>
  </div>
</body>

Questions

What is wrong with my code? How can I fix it?

回答1:

Since you are assigning the DataShareServ to the scope of your gnomeList Controller, you could simply iterate over the Data which is stored in your service and which gets updated and reassigned on every request. This way you don't have to deal with syncing your objects on different Controllers.

This way, the html would look something like this:

<li ng-repeat="gnome in listCtrl.listServ.data">
   {{gnome.name}}
</li>

Edit

Also note, you have another Problem in your Code. In the gnomeList Controller, you are calling the request method of your Service which does an async request to some endpoint and assigns its result to a local variable, but you do not wait with assigning your controller variable to the result of the Service variable. So in simple Words:

self.list = self.listServ.data;

this will always be empty because the http request is async. You need to deal with Promises (or something like that). Take a look at the $q Service from angular: https://docs.angularjs.org/api/ng/service/$q

Note that this would not be important if you would go with my solution, just wanted to point that out.

回答2:

The obvious problem is that self.list is being reassigned.

After self.list = response.data.entries is done, self.list and DataShareServ.data refer to different objects.

It could be solved by keeping the reference to the same object with

self.list.length = 0;
Object.assign(self.list, response.data.entries);

Another problem is that controller does the job that it shouldn't, this results in design issues. $http requests shouldn't be performed in controller. DataShareServ service should contain methods that modify its own data.

来源：https://stackoverflow.com/questions/42055954/share-data-between-controllers-using-service-angularjs-1-6-1

标签

javascript

angularjs

service

controllers