angularjs – Angular Router – $watch state params不工作

我正在使用Angular UI路由器(最新版本),我正在尝试更新搜索参数,而不是重新加载整个页面.我想$观看$stateParams,但手表不适用于我的设置.

为清楚起见,当我使用transitionTo()时,我希望更新URL,并且我希望更新$stateParams并在$stateParams上触发$watch,但我不希望整个控制器再次运行. reloadOnSearch：false会阻止控制器再次运行,但会产生副作用,即停止$watch的触发,或者看起来如此.无论如何,这是我的代码

$stateProvider配置：

$urlRouterProvider.otherwise("/search");

$stateProvider
    .state('search',{
        url: "/search?locationtext&method",templateUrl: "templates/searchResults.tpl.html",controller: 'SearchResultsCtrl as searchResults',reloadOnSearch : false
    })

按钮点击处理程序

$state.transitionTo($state.current,{locationtext: 'london'},{
    location : true,reload: false,inherit: false,notify: true
});

$观看州参数：

$scope.stateParams = $stateParams;

$scope.$watchCollection('stateParams',function(){
    $log.info("State params have been updated",$scope.stateParams);
});

这就是发生的事情：

1)首次加载状态时,手表将触发并且状态控制器将记录到控制台.

2)当我点击按钮时,状态转换,网址显示#/ search？locationtext = london

3)此时手表不会被触发,尽管console.log显示$state.params已更新

4)如果我点击浏览器后退按钮,则从URL中删除locationtext = london,但手表不再触发.

不知道我在这里做错了什么.我假设我已经正确设置了手表,否则在首次加载控制器时它不会触发？

任何想法将不胜感激.

编辑：

我还添加了以下内容

$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
    console.log("$stateChangeStart",$rootScope.stateParams);

});

但事件甚至没有触发,尽管url更改并且$state.params在transitionTo()之后不同;

编辑2：

我一直在浏览代码,似乎将reloadOnSearch设置为false意味着如果你只更改搜索参数,那么没有任何反应,即使URL更改,转换也不会发生,并且$stateChangeStart事件不会被广播.

这不是我所期待的.我期待所有这一切发生,但控制器不能重新加载.所以现在我正在寻找一种方法来更改搜索参数并观察更改,以便我可以更新我的搜索结果.看起来Angular UI路由器无法执行此操作,因为您要么重新加载控制器,要么没有事件.

解决方法

问题是$stateParams不是$stateParams.他们可能看起来很相似,但显然他们不是.

我的意思是,如果您从angular-ui-router源代码中手动删除以下行,您的观察者将触发：

var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(),params);

(Line 3534,构建可分发; src / state.js的Line 1385为未构建版本.)

删除行的另一种方法是使用angular.copy,如文件中的其他地方所使用的：

var _stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(),params);
copy(_stateParams,$stateParams); // This project has a short-hand for angular.copy

不可否认,这是一个不完整的答案,因为我不知道为什么会这样.也许这是angular-ui-router中的一个错误,也许是设计上的错误.
您最好的选择可能是回复关于空$stateParams的许多打开的门票之一(可以在：https://github.com/angular-ui/ui-router/search?q=stateParams+&type=Issues找到),或者如果您认为您有额外的信息,请创建一个.

在此期间,您可以通过观看$state.params来使代码工作：

$scope.$watchCollection(function(){
    return $state.params;
},$scope.stateParams);
});

编辑：一些测试代码：http://plnkr.co/edit/0UqUzZDSfMtPf3bSjBS7?p=preview

在这个plunker中,您可以更改html以包含更新版本的angular-ui-router,以查看删除该行实际上使两种类型的观察者都能正常工作.