调用$ state.go后,ion-list不会刷新

Question

我正在使用本教程学习AngularJS和离子框架:

http://www.htmlxprs.com/post/12/tutorial-on-using-parse-rest-api-and-ionic-framework-together

一切正常,直到我在createTodo状态下创建一个新项目,然后调用$ state.go('todos')返回我的项目列表,这里是创建Todo控制器的代码:

.controller('TodoCreateController', ['$scope', 'Todo', '$state', function($scope, Todo, $state) {
    $scope.todo = {};

    $scope.create = function() {
        Todo.create({content: $scope.todo.content}).success(function(data) {
            $state.go('todos', {}, {reload: true});
        });
    }
}])

这是项目列表控制器的代码:

.controller('TodoListController', ['$scope', 'Todo', '$state', function($scope, Todo) {
    Todo.getAll().success(function(data) {
        $scope.items = data.results;
    });

    $scope.deleteItem = function(item) {
        Todo.delete(item.objectId);
        $scope.items.splice($scope.items.indexOf(item), 1);
    };
}])

以下是配置的状态

.config(function($stateProvider) {
    $stateProvider.state('todos', {
        url: '/todos',
        controller: 'TodoListController',
        templateUrl: 'views/todos.html'
    }).state('createTodo', {
        url: '/todo/new',
        controller: 'TodoCreateController',
        templateUrl: 'views/create-todo.html'
    });
})

当应用程序启动时,TodoListController的方法被调用,这要归功于添加的最后一行和主app.js中的.run方法的结尾(或者至少这是我的理解):

.run(function($ionicPlatform, $state) {
    $ionicPlatform.ready(function() {

        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });

    $state.go('todos');
})

我的问题是,一旦创建了新项目并从TodoCreateController调用$ state.go('todos'),它就会将我带回项目列表,但是新项目不在那里以及TodoListController的方法永远不会被调用,因此列表已过时.

如何在创建新项目后刷新"待办事项"状态中的列表？

Answer 1

我找到了相当优雅的解决方案:

在我的TodoListController中,我定义了一个这样的事件监听器:

$rootScope.$on('todo:listChanged', function() {
    $scope.updateList();
});

然后是updateList()方法

$scope.updateList = function() {
    Todo.getAll().success(function(data) {
        $scope.items = data.results;
    });
};

最后在TodoCreateController中,I $在创建项目后立即向上发出事件,在更改状态之前

$scope.create = function() {
    Todo.create({content: $scope.todo.content}).success(function(data) {
        $scope.$emit('todo:listChanged');
        $state.go('todos');
    });
};

瞧!列表会相应更新,如果删除或更新列表项,我现在可以使用相同的事件