Monday 6 May 2019

angularjs - Suppress reloading of ui-router based view on query parameter change



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.


Answer



Have you tried reloadOnSearch parameter within routes definition?




{
route:'/',
resolve: {
templateUrl:'template.html',
reloadOnSearch: false
}
},

No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...