Suppress reloading of ui-router based view on query parameter change
anchor, angular-ui-router, angularjs
Solution
Have you tried `reloadOnSearch` parameter within routes definition?
{
route:'/',
resolve: {
templateUrl:'template.html',
reloadOnSearch: false
}
},
Problem
Updated question Question in title still stands - is it possible to catch `?parameters` and cancel view reload. Original question: I need to add anchor support for my application (anchors to topics). Here's how far I am: ``` 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); }); }); ``` My root issue is when I click on link with `#/topics/slug-name?section=section-1`, state is reloaded completely, which in turn re-requests data for Topic. How can one just "refresh" query parameters (and catch that event in controller) but don't reload state (to keep data loaded)? EDIT For my issue there is a rather simple solution which I've failed to notice - per AngularJS documentation on "Hashbang and HTML5 Modes" - last hash is accessible via `$location.hash()` and scrolling can be initiated by `$anchorScroll()` So my current solution is: In controller: ``` $scope.$watch('$location.hash', function () { _.defer($anchorScroll); }); ``` Defer is needed because content may not be parsed yet and there are no id's. In template I just had to set target to `#/topics/slug-name#section-name`.