[英]AngularJS Resolving a Promise
I am learning how to use resolve from an example , and applying it on to my Todo script. 我正在学习如何使用示例中的 resolve,并将其应用于我的Todo脚本。
Then I realised an issue, that the example is only showing me how to resolve GET call to get me the Todo List when I first visit this route. 然后我意识到一个问题,该示例仅向我展示了当我第一次访问此路线时如何解析GET调用以获取Todo列表。
However, in the same route same page I have an Add button to POST new todo item, also a Clear button to DELETE completed items. 但是,在相同路径的同一页面中,我有一个添加按钮来POST新的待办事项项,还有一个清除按钮来删除已完成的项目。
Looking at my $scope.addTodo = function() {
and $scope.clearCompleted = function () {
I want to Resolve my TodoList again after the action. 查看我的
$scope.addTodo = function() {
和$scope.clearCompleted = function () {
我希望在操作后再次解析我的TodoList。 How can I do that? 我怎样才能做到这一点?
Here is my code. 这是我的代码。 In my code, the initial
resolve: { todos: TodosListResl }
is working, it hits TodosListResl
function and produces the promise. 在我的代码中,初始
resolve: { todos: TodosListResl }
正在工作,它命中TodosListResl
函数并产生promise。 However, I don't know what to do with addTodo
and clearComplete
when I want to resolve the todo list again. 但是,当我想再次解析待办事项列表时,我不知道如何处理
addTodo
和clearComplete
。
main.js main.js
var todoApp = angular.module('TodoApp', ['ngResource', 'ui']);
todoApp.value('restTodo', 'api/1/todo/:id');
todoApp.config(function ($locationProvider, $routeProvider) {
$routeProvider.when("/", { templateUrl: "Templates/_TodosList.html",
controller: TodosListCtrl, resolve: { todos: TodosListResl } });
$routeProvider.otherwise({ redirectTo: '/' });
});
//copied from example, works great
function TodoCtrl($scope, $rootScope, $location) {
$scope.alertMessage = "Welcome";
$scope.alertClass = "alert-info hide";
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$scope.alertMessage = "Loading...";
$scope.alertClass = "progress-striped active progress-warning alert-info";
});
$rootScope.$on("$routeChangeSuccess", function (event, current, previous) {
$scope.alertMessage = "OK";
$scope.alertClass = "progress-success alert-success hide";
$scope.newLocation = $location.path();
});
$rootScope.$on("$routeChangeError",
function (event, current, previous, rejection) {
alert("ROUTE CHANGE ERROR: " + rejection);
$scope.alertMessage = "Failed";
$scope.alertClass = "progress-danger alert-error";
});
}
//also copied from example, works great.
function TodosListResl($q, $route, $timeout, $resource, restTodo) {
var deferred = $q.defer();
var successCb = function(resp) {
if(resp.responseStatus.errorCode) {
deferred.reject(resp.responseStatus.message);
} else {
deferred.resolve(resp);
}
};
$resource(restTodo).get({}, successCb);
return deferred.promise;
}
//now, problem is here in addTodo and clearCompleted functions,
//how do I call resolve to refresh my Todo List again?
function TodosListCtrl($scope, $resource, restTodo, todos) {
$scope.src = $resource(restTodo);
$scope.todos = todos;
$scope.totalTodos = ($scope.todos.result) ? $scope.todos.result.length : 0;
$scope.addTodo = function() {
$scope.src.save({ order: $scope.neworder,
content: $scope.newcontent,
done: false });
//successful callback, but how do I 'resolve' it?
};
$scope.clearCompleted = function () {
var arr = [];
_.each($scope.todos.result, function(todo) {
if(todo.done) arr.push(todo.id);
});
if (arr.length > 0) $scope.src.delete({ ids: arr });
//successful callback, but how do I 'resolve' it?
};
}
I think you're missing the point of resolve
. 我想你错过了
resolve
。 The point of resolve
is to " delay route change until data is loaded . In your case, you are already on a route, and you want to stay on that route. But, you want to update the todos
variable on the successful callback. In this case, you don't want to use resolve
. Instead, just do what needs to be done. For example resolve
是“ 在数据加载之前延迟路由更改 。在您的情况下,您已经在路由中,并且您希望保持该路由。但是,您希望在成功回调时更新todos
变量。”在这种情况下,您不想使用resolve
。而只需执行需要完成的操作。例如
$scope.addTodo = function() {
$scope.src.save({ order: $scope.neworder,
content: $scope.newcontent,
done: false }, function () {
todos.push({ order: $scope.neworder,
content: $scope.newcontent,
done: false });
});
//successful callback, but how do I 'resolve' it?
};
As a side point, I noticed you're using _
most likely from the Underscore library. 作为一个侧面点,我注意到你正在使用
_
最有可能来自Underscore库。 You don't need to use another library for that because Angular already has $angular.forEach()
. 你不需要使用另一个库,因为Angular已经有了
$angular.forEach()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.