背景

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

问题

问题是过滤器不起作用!我的gnome-filter控制器无法与gnome-list控制器通信。为了解决这个问题,我尝试通过在StackOverlflow中阅读以下答案来创建服务:


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


但是,在创建了我认为可以很好地复制答案的内容之后,它仍然无法正常工作。



首次加载应用程序时,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>





问题


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

最佳答案

由于将DataShareServ分配给gnomeList控制器的作用域,因此可以简单地遍历存储在服务中的数据,该数据会在每次请求时进行更新和重新分配。这样,您不必处理在不同Controller上同步对象的问题。

这样,html将如下所示:

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


编辑

另请注意,您的代码中还有另一个问题。在gnomeList控制器中,您正在调用Service的request方法,该方法向某个端点发出异步请求,并将其结果分配给局部变量,但是您不必等待将控制器变量分配给服务变量。因此,用简单的话来说:

self.list = self.listServ.data;


由于http请求是异步的,因此它将始终为空。您需要处理Promises(或类似的东西)。从角度看$q服务:https://docs.angularjs.org/api/ng/service/$q

请注意,如果您要使用我的解决方案,这只是重要的,只是想指出这一点。

关于javascript - 使用Service AngularJs 1.6.1在 Controller 之间共享数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42055954/

10-09 06:10
查看更多