AngularJS服务中的变量不是在视图中更新吗? [英] AngularJS Variable in service is not updating in view?
问题描述
我花了几天的时间将头撞到桌子上,阅读博客文章,以及关于我的问题的问题.我尝试了下面的代码的几种变体,但到目前为止还没有奏效.我将不胜感激任何帮助.
I have spent a couple of days banging my head against the table, reading blog posts, and SO questions around my issue. I tried several variations of the code I have below and none has worked so far. I would appreciate any help.
服务中的taskList变量确实会更新,但控制器中的那个不会更新.
The taskList variable inside the service does update, but the one in the controller does not.
控制器
angular.module("TaskManager").controller("mainController", function ($scope, API) {
$scope.init = function () {
console.log("Initializing app");
API.getTasks();
}
$scope.tasks = API.taskList;
$scope.$watch(function(){return API.taskList}, function(newVal, oldVal){
alert("This is tasklist in controller" + newVal);
}, true)
});
服务
angular.module("TaskManager").service("API", function ($http, $rootScope) {
const apiKey = "PUH";
var taskList = [1,2,3,4];
const getTasks = function () {
$http.get("https://api.mlab.com/api/1/databases/jquerytaskmanager/collections/tasks?apiKey=" + apiKey).then(function (data) {
taskList = data;
console.log(taskList);
});
};
$rootScope.$watch(function(){return taskList}, function(newVal, oldVal){
alert(taskList);
taskList = newVal;
console.log(taskList);
}, true)
return {
getTasks,
taskList
}
});
查看
<div class="row">
<div class="col s12">
<ul id="mainMenu" class="right hide-on-med-and-down">
<li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a></li>
<li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-plus" aria-hidden="true"></i> Add Task</a></li>
<li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-pencil" aria-hidden="true"></i> Manage Categories</a></li>
</ul>
</div>
</div>
<div class="mainContainer container">
<div class="row">
<div class="col 6">
<h2>Tasks</h2>
</div>
</div>
<ul>
<li class="taskContainer" ng-repeat="task in tasks" >
<div class="row">
<div class="col s6">
<span class="taskName"> {{task.task_name}}</span>
</div>
<div class="col s6">
<button class="btn blue darken-4 waves-effect waves-light ">Edit</button> <button class="btn red darken-4 waves-effect waves-light ">Delete</button>
</div>
</div>
</li>
</ul>
</div>
推荐答案
从服务中返回$ http承诺:
Return the $http promise from the service:
app.service("API", function($http) {
this.getTasks = function() {
return $http.get(url);
};
});
然后在控制器中,从promise中提取数据:
Then in the controller, extract the data from the promise:
app.controller("mainController", function($scope, API) {
this.$onInit = function () {
console.log("Initializing app");
API.getTasks().then(function(response) {
$scope.tasks = response.data;
});
};
});
有关更多信息,请参见 AngularJS $ http服务API参考.
For more information, see AngularJS $http Service API Reference.
这篇关于AngularJS服务中的变量不是在视图中更新吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!