在$状态后，离子列表不会刷新。调用go

Question

我正在使用本教程学习AngularJS和ionic framework：

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的方法。在主应用程序中运行方法。js（至少我是这么理解的）：

.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');
})

我的问题是，一旦创建了新项并调用了$state。从TodoCreateController转到（'todos'），它会将我带回项目列表，但新项目不在那里，并且从未调用TodoListController的方法，因此使列表过期。

创建新项目后，如何在“待办事项”状态下刷新列表？

Answer 1

我的建议：

在配置中添加：

$stateProvider.state('todos', {
    url: '/todos',
    controller: 'TodoListController',
    templateUrl: 'views/todos.html',
    params : {
        updated : false
    }
})

使用用户界面-router阅读params

然后在您创建待办事项的$state.go中，我会将其更改为：

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

在todo控制器中，我会添加以下内容

if($stateParams.updated == true){
    Todo.getAll().success(function(data) {
        $scope.items = data.results;
    });
    $stateParams.updated = false;
}

这样，而不是指望重新加载来运行您正在显式寻找将触发重新加载的值的函数。您还可以使用data对象而不是params对象执行同样的事情，并通过以下方式设置/检索值：

$state.get('createTodo').data.updated = true;
if($state.current.data.updated == true);

希望这有帮助！

另一个想法

向混合中添加状态更改侦听器：

$rootScope.$on('$stateChangeSuccess', function(e, toState, toParams, fromState, fromParams) {
    if(fromState.name === 'createTodo' && toParams.updated == true){
        Todo.getAll().success(function(data) {
            $scope.items = data.results;
        });
        $stateParams.updated = false;
    }
}

Answer 2

我遇到过这种情况和类似的问题，事实证明，在返回缓存视图时，离子视图缓存通常是不调用控制器代码的原因。

可能的解决方案

当将控制器代码分离为一次性初始化和输入视图时运行的代码时，您通常以如下所示的控制器结束：

// one-time initialization
$scope.updateList = function() {
    Todo.getAll().success(function(data) {
        $scope.items = data.results;
    });
};

$scope.$on('$ionicView.beforeEnter', function () {
    $scope.updateList();
});

这应该可以解决您的问题，而无需触发事件或向路由添加参数或数据。

备选方案

可以通过不同的方式禁用视图缓存：

• 将缓存：false添加到状态定义中
• 将缓存视图添加到html

使用子状态时的陷阱

不是在你的情况下，但如果编辑/创建行子状态（例如状态todo为列表和todo.create为创建一个新的待办事项），有一个额外的问题来自用户界面-router：

从todo导航时。创建到状态todo，您的超级状态todo将不会被“执行”，因为您从todo来时已经处于此状态。创建。这是一个常见的问题，可以通过本帖其他答案中提供的一个更复杂的解决方案来解决。

Answer 3

我找到了一个相当优雅的解决方案：

在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');
    });
};

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