Situation:
I am working on an Angular application where in one page manageProviders.html
I wanted to add a button to go back to another page providers.html
which contains the list of all providers.
I used an <a>
element with a ui-sref="providers"
attribute, because I use angular states in my application, everything works perfectly.
Problem:
But when I tried to add a confirmation dialog with that button so the user confirms his action, actually it show the confirm dialog but doesn't do anything whether I press OK or Cancel it doesn't work and the link is always active and keeps forwarding me to the Providers.html
page.
This is the HTML code of the link with the confirmation code I tried:
<a class="btn btn-default" onclick="return confirm('Are you sure?')" ui-sref="providers">Back</a>
I even tried it with the following code in my controller and deleted the inline onclick
event in my link:
$('#goBack').on('click', function(e) {
if (!confirm('Are you sure?')) {
e.preventDefault();
} else {
$('#goBack').attr("ui-sref", "fournisseur");
}
});
Where goBack
is the id
of my <a>
element, but both solutions doesn't work.
This is how I am declaring my states in my application if it helps:
$stateProvider.state('main', {
abstract: true,
templateUrl: 'app/views/main.html',
access: {
requiredLogin: false
}
}).state('addProvider', {
url: APPLICATION_URL + '/addProvider',
templateUrl: 'app/views/content/manageProviders.html',
parent: 'main',
controller: 'providerController'
}).state('providers', {
url: APPLICATION_URL + '/provider',
templateUrl: 'app/views/content/providers.html',
parent: 'main',
controller: 'providerController'
});
EDIT:
I think the problem is related to the ui-sref
attribute, because with a simple href
and the same confirmation code it works perfectly, like you can see in this fiddle:
<a onclick="return confirm('Are you sure?')" href="www.google.com">Back</a>
How can I achieve it? What am I doing wrong?