角路由器 - $观看状态参数不起作用

• Z时代
• 2024-01-10
• 分类：问答

我正在使用Angular UI路由器（非常新的版本），我试图更新搜索参数，而不是重新加载整个页面。我想要$ watch $ stateParams，但手表无法使用我的设置。为了清楚起见，当我使用transitionTo（）时，我希望更新URL，并且我希望$ stateParams被更新，$ watch被激发到$ stateParams，但是我不希望整个控制器再次运行。 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 
}); 

$看国家PARAMS：

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

这是正在发生的事情：

1）首次加载状态时，手表会触发并且状态列将记录到控制台。

2）当我点击按钮，状态被转换和URL说＃/搜索？locationtext =伦敦

3）手表是不是在这一点上发射，虽然执行console.log显示， $ state.params已更新

4）如果我点击浏览器后退按钮，位置文本=伦敦从URL中删除，但手表不会再触发。

不知道我在做什么错在这里。我假设我已经正确设置了手表，否则在控制器第一次加载时它不会启动？

任何想法将不胜感激。

编辑：

我还增加了以下

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

但该事件甚至没有开火，尽管URL变化和$ state.params作为transitionTo后不同（ ）;

编辑2：

我已经通过拖网的代码，它好像reloadOnSearch设置为false意味着，如果你只改变搜索参数，然后什么也没有发生，即使网址变更的过渡没有按不会发生，$ stateChangeStart事件不会被广播。

这不是我所期待的。我期待着所有这些发生，但控制器不会被重新加载。因此，现在我正在寻找一种方法来更改搜索参数并监视更改，以便我可以更新搜索结果。它看起来像Angular UI路由器没有办法做到这一点，因为你得到一个控制器重新加载或没有事件。

回答：

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

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

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

以上是 角路由器 - $观看状态参数不起作用 的全部内容， 来源链接： utcz.com/qa/262436.html