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?

try use `ng-click` instead `onclick` – Akashii Apr 06 '17 at 13:51 — Akashii, Apr 06 '17 at 13:51
@ThanhTùng It gives the same thing. – cнŝdk Apr 06 '17 at 13:55 — cнŝdk, Apr 06 '17 at 13:55
I try make a answer . Hope it help – Akashii Apr 06 '17 at 14:01 — Akashii, Apr 06 '17 at 14:01

score 1 · Answer 1 · answered Apr 06 '17 at 14:00

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{
//
}
        });
    }
})

answered Apr 06 '17 at 14:00

Akashii

2,251
3
17
29

Thank for your suggestion, but I think it's not a good idea to create a whole directive just for something so simple. – cнŝdk Apr 06 '17 at 14:28

score 1 · Answer 2 · answered Apr 07 '17 at 08:31

1

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

answered Apr 07 '17 at 08:31

Vohidjon Karimjonov

539
5
9

Nice approach, using the `$state.go()`, it works perfectly. – cнŝdk Apr 07 '17 at 08:52
Could you accept my answer if it helped to solve the issue? – Vohidjon Karimjonov Apr 07 '17 at 09:43
While your answer gave a good suggestion for using `$state.go()` but it doesn't answer my question about `ui-sref`, and you suggested to use `ng-click` and bind a function to it in controller but I was already doing it. – cнŝdk Apr 07 '17 at 16:22

cнŝdk · Accepted Answer · 2017-07-24T13:37:50.557

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');
    }
});

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

3 Answers3