使用服务 AngularJs 1.6.1 在控制器之间共享数据

Question

背景

我正在制作一个关于侏儒的人口普查应用程序。此应用程序显示所有侏儒的列表并允许您对其进行过滤。

问题

问题是过滤器不工作！我的 gnome-filter 控制器无法与 gnome-list 控制器通信。为了解决这个问题，我尝试通过阅读 StackOverlflow 中的这个答案来创建服务：

但是，在创建了我认为是答案的精美副本之后，它仍然无法正常工作。

代码

应用首次加载时，gnome-list 向 gnome 统计服务器发出请求以获取所有 gnome 并显示它们。

但是，有很多侏儒，所以我为您提供了过滤它们的选项，并且只使用 gnome-filter.

不幸的是，即使我向服务器发出请求并得到答复，我的服务仍无法正常工作...

/*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>

问题

我的代码有什么问题？我该如何解决？

Answer 1

明显的问题是 self.list 正在重新分配。

完成self.list = response.data.entries后，self.list和DataShareServ.data引用不同的对象。

可以通过保持对同一对象的引用来解决

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

另一个问题是控制器做了它不应该做的工作，这导致了设计问题。 $http 不应在控制器中执行请求。 DataShareServ 服务应包含修改其自身数据的方法。

Answer 2

由于您将 DataShareServ 分配给 gnomeList 控制器的范围，您可以简单地遍历存储在您的服务中的数据，并在每次请求时更新和重新分配。这样您就不必处理在不同控制器上同步对象的问题。

这样，html 看起来像这样：

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

编辑

另请注意，您的代码中还有另一个问题。在 gnomeList 控制器中，您正在调用服务的 request 方法，该方法对某个端点执行异步请求并将其结果分配给局部变量，但您不会等待将控制器变量分配给服务变量的结果。所以简单来说：

self.list = self.listServ.data;

这将始终为空，因为 http 请求是异步的。您需要处理 Promises（或类似的东西）。查看来自 angular 的 $q 服务：https://docs.angularjs.org/api/ng/service/$q

请注意，如果您愿意采用我的解决方案，这并不重要，只是想指出这一点。

使用服务 AngularJs 1.6.1 在控制器之间共享数据

Share data between controllers using Service AngularJs 1.6.1

javascript

service

controllers

angularjs

背景

问题

代码

问题