背景
我正在制作有关侏儒的人口普查应用程序。该应用程序显示所有侏儒的列表,并允许您对其进行过滤。
问题
问题是过滤器不起作用!我的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/