I have an Angular app built using the ui.router package for its URL routing. I would like to change it so that if the user attempts to navigate to the page they're already on, the router reloads that state rather than doing nothing. Per http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#go, $state.go does take a reload parameter that will do exactly that, however it defaults to false. Now, it strikes me as a poor idea to rewrite every single call to $state.go and every ui-sref in my code to set reload to true. What I'd like is some way to change the default value of that argument for $state.go or, failing that, at least the ui-sref decorator.
Following off of http://angular-tips.com/blog/2013/09/experiment-decorating-directives/, I attempted to at least extend the ui-sref directive (since there are a lot more of those than there are explicit $state.go calls)
myApp.config(function($provide) {
// override ui-sref to have the reload option default to true.
$provide.decorator('uiSrefDirective', function($delegate){
var directive = $delegate[0];
var link = directive.link;
directive.compile = function() {
return function(scope, element, attrs) {
if(attrs.uiSrefOpts == null){
attrs.uiSrefOpts = {};
}
if(attrs.uiSrefOpts.reload == null){
attrs.uiSrefOpts.reload = true;
}
console.log(arguments);
link.apply(this, arguments);
};
};
return $delegate;
});
However, this doesn't actually seem to accomplish anything, and even if it did, it wouldn't actually affect $state.go. Does anyone have any ideas how I might change that behavior short of doing so manually in the ui.router code?
I adjusted your approach below. We will profit from decorating, but not of the directive. As we can check here, in the ui-sref
directive source code, the click event in fact does call:
$state.go(ref.state, params, options);
So, we can decorate the $state
provider, which could be very straightforward:
.config(function ($provide) {
$provide.decorator('$state', function ($delegate) {
// let's locally use 'state' name
var state = $delegate;
// let's extend this object with new function
// 'baseGo', which in fact, will keep the reference
// to the original 'go' function
state.baseGo = state.go;
// here comes our new 'go' decoration
var go = function (to, params, options) {
options = options || {};
// only in case of missing 'reload'
// append our explicit 'true'
if (angular.isUndefined(options.reload)) {
options.reload = true;
}
// return processing to the 'baseGo' - original
return this.baseGo(to, params, options);
};
// assign new 'go', right now decorating the old 'go'
state.go = go;
return $delegate;
});
})
And that's enough. Now any state change (including click on ui-sref
) will trigger reload
.
Note: Just must say, that I do not think that this is the way. Triggering reload all the time ... to me it seems that we in fact loose a lot, loose the advantages coming with that diamond - ui-router
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With