angularjs - Angular UI Router Reload Controller on Back Button Press

Question

我有一个可以有许多可选查询参数的路由:

$stateProvider.state("directory.search", {
                url: '/directory/search?name&email',
                templateUrl: 'view.html',
                controller: 'controller'

当用户填写表单以搜索目录时， $scope 中的一个功能改变导致 Controller 重新加载的状态:

 $scope.searchDirectory = function () {
            $state.go('directory.search', {
                name: $scope.Model.Query.name,
                email: $scope.Model.Query.email
            }, { reload: true });                   
        };

在 controller我有一个条件: if($state.params){return data}决定是否会查询我的服务。

这很有效，除非用户点击浏览器的前进和/或后退按钮。在这两种情况下，状态(路由)都会正确更改查询参数，但不会重新加载 controller .

从我读过的内容来看，只有在实际路线发生变化时才会重新加载 Controller 。有没有办法让这个例子只使用查询参数才能工作，或者我必须使用不断变化的路线？

Answer 1

您应该监听成功的页面更改事件 $locationChangeSuccess。查看它的文档 https://docs.angularjs.org/api/ng/service/ $位置。

这里也有类似的问题回答，所以这里 How to detect browser back button click event using angular? .

当该事件触发时，您可以将在页面加载上运行的任何逻辑放入 Controller 初始化时需要运行的逻辑。

就像是:

$rootScope.$on('$locationChangeSuccess', function() {
    $scope.searchDirectory()
});  

或更好的设置，如:

var searchDirectory = function () {
    $state.go('directory.search', {
        name: $scope.Model.Query.name,
        email: $scope.Model.Query.email
    }, { reload: true });

$scope.searchDirectory = searchDirectory;

$rootScope.$on('$locationChangeSuccess', function() {
    searchDirectory();
});