ui-router deferIntercept và tiểu bang params

Question

tôi sử dụng deferIntercept mới() của ui-router để cập nhật các url trình duyệt mà không cần tải lại điều khiển của tôi:

$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) { 
    e.preventDefault(); 
    if ($state.current.name !== 'search') { 
    $urlRouter.sync(); 
    } 
    $urlRouter.listen(); 
}); 

Với mã này, một nhấp chuột vào nút quay lại của trình duyệt thay đổi URL thành URL trước đó, nhưng tôi không thể cập nhật trạng thái bộ điều khiển của mình để phản ánh thay đổi này. $ stateParams vẫn chứa các giá trị được đặt khi người dùng tải trang lần đầu tiên.

Cách tốt nhất để cập nhật các đối tượng $ state và $ stateParams trong bộ điều khiển của tôi khi người dùng nhấp vào nút quay lại hoặc thay đổi URL theo cách thủ công là gì?

cảm ơn!

Answer 1

Cuộc gọi của bạn tới $urlRouter.listen() phải được đặt bên ngoài trình xử lý sự kiện. Đoạn mã mà bạn cung cấp nên được thay đổi:

$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) { 
    e.preventDefault(); 
    if ($state.current.name !== 'search') { 
    $urlRouter.sync(); 
    } 
}); 

// Moved out of listener function 
$urlRouter.listen(); 

---

Nguồn: các official documentation for $urlRouter cung cấp một mẫu mã cho phương pháp deferIntercept. Nó đặt cuộc gọi đến $urlRouter.listen() bên ngoài của hàm listener:

var app = angular.module('app', ['ui.router.router']); 

app.config(function ($urlRouterProvider) { 

    // Prevent $urlRouter from automatically intercepting URL changes; 
    // this allows you to configure custom behavior in between 
    // location changes and route synchronization: 
    $urlRouterProvider.deferIntercept(); 

}).run(function ($rootScope, $urlRouter, UserService) { 

    $rootScope.$on('$locationChangeSuccess', function(e) { 
    // UserService is an example service for managing user state 
    if (UserService.isLoggedIn()) return; 

    // Prevent $urlRouter's default handler from firing 
    e.preventDefault(); 

    UserService.handleLogin().then(function() { 
     // Once the user has logged in, sync the current URL 
     // to the router: 
     $urlRouter.sync(); 
    }); 
    }); 

    // Configures $urlRouter's listener *after* your custom listener 
    $urlRouter.listen(); 
});