AngularJS解决承诺

Question

我正在学习如何使用an example的解决方案，并将其应用于我的Todo脚本。

然后我意识到一个问题，那个例子只是告诉我如何解决GET调用，让我第一次访问这条路线时，我得到了待办事项列表。

但是，在相同的路由相同的页面我有一个添加按钮POST新的todo项目，也清除按钮删除完成的项目。

看着我的$scope.addTodo = function() {和$scope.clearCompleted = function() {我想解决我的TodoList行动后再次。我怎样才能做到这一点？

这是我的代码。在我的代码中，最初的resolve: { todos: TodosListResl }正在工作，它达到了TodosListResl函数并产生了承诺。但是，当我想再次解析待办事项列表时，我不知道如何处理addTodo和clearComplete。

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? 
    }; 
} 

Answer 1

我认为你缺少的resolve点。 resolve这一点就是“delay route change until data is loaded。对于你的情况，你已经在一条路线上，并且你想保持这条路线，但是你想在成功的回调中更新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? 
}; 

作为面点什么，我注意到你正在使用_最有可能从下划线库。你并不需要使用另一个库，因为Angular已经有$angular.forEach()