1

例から解決を使用する方法を学び、それを Todo スクリプトに適用しています。

次に、このルートに最初にアクセスしたときに GET 呼び出しを解決して Todo リストを取得する方法を示しているだけであるという問題に気付きました。

ただし、同じルートの同じページに、新しい todo アイテムを POST するための [追加] ボタンと、完了したアイテムを削除するための [クリア] ボタンがあります。

私を見て、アクションの後にもう一度 TodoList を解決したいと思います$scope.addTodo = function() {。$scope.clearCompleted = function () {どうやってやるの？

これが私のコードです。私のコードでは、イニシャルresolve: { todos: TodosListResl }が機能しており、関数にヒットTodosListReslしてプロミスを生成します。しかし、いつ何をすればいいのかaddTodo、clearCompleteいつまたtodoリストを解決したいのかわかりません。

ここに画像の説明を入力

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

1 に答える 1

3

の要点を見逃していると思いますresolve。のポイント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?
};

_余談ですが、Underscore ライブラリを使用している可能性が高いことに気付きました。Angular には既に$angular.forEach().

于 2012-11-14T21:03:41.627 に答える