ion-list không làm mới sau khi $ state.go được gọi

Question

Tôi AngularJS học và khung ion sử dụng hướng dẫn này:

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

Tất cả mọi thứ hoạt động tốt cho đến thời điểm khi tôi tạo một mục mới trong tình trạng createTodo và sau đó gọi $ state.go ('todos') để quay trở lại vào danh sách các mặt hàng của tôi, đây là mã cho tạo Todo Bộ điều khiển:

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

đây là mã cho bộ điều khiển mục danh sách:

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

Dưới đây là các trạng thái cấu hình

Khi ứng dụng bắt đầu, phương pháp của TodoListController được gọi nhờ vào dòng cuối cùng bổ sung và kết thúc của phương pháp .run trong app.js chính (hoặc ít nhất thats hiểu biết của tôi):

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

vấn đề của tôi là, ngay sau khi mục mới được tạo ra và tôi gọi $ state.go ('todos') từ TodoCreateController, tôi phải mất trở lại mục danh sách nhưng mục mới không có và phương pháp o f TodoListController không bao giờ được gọi, do đó để lại danh sách lỗi thời.

Làm cách nào để làm mới danh sách trong trạng thái 'todos' sau khi một mục mới đã được tạo?

Answer 1

Tôi tìm thấy một giải pháp khá thanh lịch:

Bên TodoListController của tôi, tôi xác định một người biết lắng nghe sự kiện như thế này:

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

sau đó đến các phương pháp updateList()

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

Và cuối cùng trong TodoCreateController I $ phát ra sự kiện này lên càng sớm càng mục được tạo ra và ngay trước khi thay đổi trạng thái

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

Và thì đấy! Danh sách này cập nhật cho phù hợp và bây giờ tôi có thể sử dụng cùng một sự kiện nếu tôi xóa hoặc cập nhật một mục danh sách

Answer 2

Đề nghị của tôi:

Trong cấu hình của bạn thêm:

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

đọc về params với ui-router here

Sau đó, trong bạn $ state.go của bạn tạo todo tôi sẽ thay đổi nó như thế này:

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

Trong điều khiển todo của bạn tôi sẽ thêm này

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

Bằng cách này chứ không phải trông chờ vào các tải lại để chạy các chức năng bạn đang tìm kiếm một cách rõ ràng cho một giá trị mà sẽ kích hoạt tải lại. Bạn cũng có thể làm điều tương tự bằng cách sử dụng đối tượng data chứ không phải là đối tượng params và thiết lập/lấy giá trị qua:

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

Hope this helps!

Một tưởng

thêm một người biết lắng nghe thay đổi trạng thái để trộn:

$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 3

này đã làm các trick cho tôi:

$state.transitionTo('new-state', $state.$current.params, {reload: true}); 

Answer 4

Tôi đã gặp phải vấn đề này và tương tự và nó bật ra rằng chế độ xem ionic caching thường là lý do không gọi mã bộ điều khiển khi quay lại chế độ xem được lưu trong bộ nhớ cache.

Giải pháp

Khi tách mã điều khiển vào một thời gian khởi và mã chạy khi nhìn được nhập, bạn thường kết thúc với bộ điều khiển tìm kiếm như thế này:

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

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

Điều này sẽ giải quyết vấn đề của bạn mà không cần phải kích hoạt sự kiện hoặc thêm thông số hoặc dữ liệu vào tuyến đường.

Alternative

Có thể vô hiệu hóa tầm nhìn bộ nhớ đệm theo những cách khác nhau:

• thêm cache: false định nghĩa nhà nước
• thêm cache-view="false" để html <ion-view ...>
• vô hiệu hóa bộ nhớ đệm với $ionicConfigProvider.views.maxCache(0); (sẽ không đề xuất điều này)

Pitfall khi sử dụng Sub-Hoa

Không có trong trường hợp của bạn, nhưng nếu chỉnh sửa/tạo hàng trong Sub-Hoa (ví dụkhẳng định todo cho danh sách và todo.create để tạo một todo mới), có một vấn đề nữa đến từ ui-router:

Khi điều hướng từ todo.create nêu todo, bạn siêu nhà nước todo sẽ không được "thực hiện", vì bạn đã ở trạng thái này khi đến từ todo.create. Đây là một vấn đề phổ biến và có thể được giải quyết bằng một trong những giải pháp phức tạp hơn được cung cấp trong các câu trả lời khác cho bài đăng này.