Confirm dialog doesn't work properly with link element using ui-sref

Question

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?

Answer 1

Try add directive in a like this

<a ng-click="..()"click></a>

And in js

module.directive('click', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
if(//){
            event.preventDefault();
}else{
//
}
        });
    }
})

Answer 2

Use ng-click to call controller function

<a ng-click="goBack()">Go back</a>

and in controller, conditionally change ui-router's $state

$scope.goBack = function(){
      if(confirm('Are you sure?')){
           $state.go('providers');
      }
}

Do not forget to inject $state service to your controller

Answer 3

The problem was with the ui-sref attribute, that couldn't be assigned dynamically in the controller in my previous code and for some reasons was always called if it's used in inline HTML.

Solution:

So I found a solution by removing it from my HTML and using $location.path in my controller instead.

This is the controller code updated:

$('#goBack').on('click', function (e) {
    if(!confirm('Are you sure?')){
        e.preventDefault();
    }else{
        $location.path(APPLICATION_URL + '/providers');
        $scope.$apply();
    }
});

And everything works perfectly.

Edit:

I edited my code to use @vohidjon's suggestion with my existing code and used $state.go(), it seems to be the best solution:

$('#goBack').on('click', function (e) {
    if(!confirm('Are you sure?')){
        e.preventDefault();
    }else{
        $state.go('providers');
    }
});