Question

背景

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

问题

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

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

然而，在创建了我认为是答案的精美复制品之后，它仍然无效。

代码

当应用程序首次加载时，gnome-list向gnome人口普查服务器发出请求以获取所有gnome并显示它们。

但是，有很多侏儒，所以我为你提供了过滤它们的选项，只使用gnome-filter来获取读头发的那些。

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

＆＃13;

/*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;
  });

})();

＆＃13;

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

＆＃13;

问题

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

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方法，该方法向某个端点发出异步请求并将其结果分配给本地变量，但您不必等待将控制器变量分配给Service变量的结果。所以用简单的话说：

self.list = self.listServ.data;

这将始终为空，因为http请求是异步的。你需要处理Promises（或类似的东西）。从角度https://docs.angularjs.org/api/ng/service/$q
查看$q服务
请注意，如果你选择我的解决方案，这并不重要，只是想指出这一点。

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

背景

问题

代码

问题

2 个答案: