• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

angularjs 来源:jonhobbs 5次浏览

我正在使用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路由器没有办法做到这一点,因为你得到一个控制器重新加载或没有事件。


===========解决方案如下:

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

我的意思是,如果你手动删除angular-ui-router源代码如下行,你的观察家会触发:

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

(Line 3534,内置分配; SRC /状态Line 1385。 。JS为未构建版本)

的替代方法除去线是使用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; 
}, function(){ 
    $log.info("State params have been updated", $scope.stateParams); 
}); 

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

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)