基于路由器的查询参数更改视图
更新的问题
标题中的问题仍然存在 - 是否有可能捕捉?parameters并取消视图重新加载。
原始问题 ：我需要为我的应用程序添加锚支持（锚定主题）。
这是我有多远：
angular.module('app.topics', [
'ui.state',
'ui.router',
'restangular'
'app.topics.controllers'
])
.config(function config($stateProvider) {
$stateProvider.state('viewtopic', {
url: '/topics/:slug?section',
onEnter: function($stateParams) {
// Works, as state has been reloaded.
console.log('$stateParams', $stateParams);
},
resolve: {
topic: function ($stateParams, Topic) {
// Wrapper around Restangular. Returns promise.
return new Topic().get($stateParams.slug);
}
},
views: {
'main': {
controller: 'TopicCtrl',
templateUrl: 'topics/templates/details.tpl.html'
},
'sidebar': {
controller: 'SidebarCtrl',
templateUrl: 'topics/templates/sidebar.tpl.html'
}
}
});
});
angular.module('app.topics.controllers', [])
.controller('TopicCtrl', function ($scope, topic, $rootScope, $location,
$anchorScroll, $stateParams) {
$scope.topic = topic;
$scope.slug = $stateParams.slug;
$scope.section = $stateParams.section;
// ..
$scope.$watch('$stateParams.section', function (newValue, newValue) {
// Does not work.
console.log('stateParams.section changed', newValue, newValue);
});
});
我的根本问题是当我点击与#/topics/slug-name?section=section-1 ，状态将完全重新加载，然后重新请求Topic的数据。 如何才能刷新查询参数（并在控制器中捕获该事件）但不重载状态（以保持数据加载）？
编辑
对于我的问题，有一个相当简单的解决方案，我没有注意到 - 根据AngularJS有关“Hashbang和HTML5模式”的文档，last hash可以通过$location.hash()访问，滚动可以由$anchorScroll()
所以我现在的解决方案是：
在控制器中：
$scope.$watch('$location.hash', function () {
_.defer($anchorScroll);
});
推迟是需要的，因为内容可能还没有被解析，并且没有身份证。
在模板中，我只需将目标设置为#/topics/slug-name#section-name 。
你有没有尝试在路径定义reloadOnSearch参数？
{
route:'/',
resolve: {
templateUrl:'template.html',
reloadOnSearch: false
}
},
我的两分钱
首先检查@doodeec将reloadOnSearch设置为false的答案：
{
route:'/',
resolve: {
templateUrl:'template.html',
reloadOnSearch: false
}
},
然后在控制器上你想要捕捉到这个：
/* Setup to detect when there is a change in the search */
$scope.$on('$routeUpdate', function(next, current) {
// Do something when routeupdate is called.
});
我想要更改搜索的情况：
$location.search({'slide_id': slide_id})
还要照顾一个小窍门：
如果您的路由参数不会更改（或更改为相同的值），因为重新加载被禁用，则可能需要强制更改位置：
$scope.$emit('$locationChangeSuccess');
来自评论：
没有ngRoute ，就不会有$ routeUpdate事件。 在这种情况下，您需要监听$scope.$on('$locationChangeSuccess', ...)
这可以通过使用嵌套状态来实现。 代码看起来像这样
$stateProvider.state('viewtopic', {abstract:true,
url:/topics,
resolve: {
topic: function ($stateParams, Topic) {
// Wrapper around Restangular. Returns promise.
return new Topic().get($stateParams.slug);
}
},
views: {
templateUrl:<template>
}
});
$stateProvider.state('viewtopic.impl', {abstract:true,
url: '/:slug?section',
onEnter: function($stateParams) {
// Works, as state has been reloaded.
console.log('$stateParams', $stateParams);
},
views: {
'main': {
controller: 'TopicCtrl',
templateUrl: 'topics/templates/details.tpl.html'
},
'sidebar': {
controller: 'SidebarCtrl',
templateUrl: 'topics/templates/sidebar.tpl.html'
}
}
更多阅读 - > https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
链接地址: http://www.djcxy.com/p/77937.html