angularjs – 后退按钮上的Angular UI路由器重载控制器按

前端之家收集整理的这篇文章主要介绍了angularjs – 后退按钮上的Angular UI路由器重载控制器按前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个可以有许多可选查询参数的路由:

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

用户填写表单以搜索目录时,$scope中的函数会更改导致控制器重新加载的状态:

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

在控制器中我有一个条件:if($state.params){return data}指示我的服务是否会被查询.

除非用户点击浏览器的前进和/或后退按钮,否则此功能非常有效.在这两种情况下,状态(路由)都会正确更改查询参数,但不会重新加载控制器.

根据我的阅读,只有在实际路线发生变化时才会重新加载控制器.反正有没有让这个例子只使用查询参数工作,还是我必须使用不断变化的路线?

解决方法

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

还有一个类似的问题在这里回答了How to detect browser back button click event using angular?.

当该事件触发时,您可以将您在页面加载上运行的任何逻辑放在控制器初始化时需要运行的逻辑上.

就像是:

$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();
});

猜你在找的Angularjs相关文章