Question

我正在使用Angular UI路由器（最新版本），我正在尝试更新搜索参数，而不是重新加载整个页面。我想观看$ stateParams，但手表不能正常使用我的设置。

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

$ stateProvider config：

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

$观看State params：

$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路由器无法执行此操作，因为您要么重新加载控制器，要么没有事件。

Answer 1

问题在于subview.layer.masksToBounds = true不是$stateParams。他们可能看起来很相似，但显然他们不是。

我的意思是，如果您从$stateParams源代码手动删除以下行，您的观察者将触发：

angular-ui-router

（Line 3534，用于未构建版本的src / state.js的已构建可分发; Line 1385。）

删除该行的另一种方法是使用文件中其他位置使用的var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(), params);：

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的许多打开的门票之一（可以在https://github.com/angular-ui/ui-router/search?q=stateParams+&type=Issues找到），或者如果您认为自己有额外信息，请创建一个。< / p>

在此期间，您可以通过观看$stateParams来改善代码：

$state.params

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

在这个plunker中，您可以更改html以包含{-1}}版本的angular-ui-router，以确保删除该行实际上使两种类型的观察者都能正常工作。

Angular Router - $ watch state params不工作

1 个答案: