How to add an confirmation window on ng-click Angular

Question

I have a link with ng-click. I need a confirmation window on that click.

<h4><a href="" ng-click="makeUnfavourite(favourite.userId,$index);remove(favouriteData.data.result,$index)">Un-Favourite</a></h4>

currently it includes 2 functions. I have to execute this two functions only after confirmation. my two functions are defined in usercontroller.js.plz see code below

var userControllers = angular.module('userControllers', ['ui.bootstrap','gm']);
userControllers.controller('myProfileCtrl', function ($scope, $routeParams, $rootScope, $http, $location, $window, $timeout) {`  
$scope.makeUnfavourite=function(id,index){
    var indextoremove=index;
    var currentuserid=2;
    var favUserId=id;
    console.log(favUserId);
    var params = {
        currentuserid:2,
        favUserId:id
        };
       if(favUserId){
        $http.post($rootScope.STATIC_URL + 'users/makeUnFavourite', params).success(function(response){
            $scope.favHide=response;
            }).error(function(err){
            console.log("Error"+err);
        });
    }

};
$scope.remove = function(favourite,index){
    favourite.splice(index,1);
};
});

I have to execute makeUnfavourite() & remove() function on confirmation.I am fresher in angular. Now I am working in a partially finished project

Possible duplicate of [Confirmation dialog on ng-click - AngularJS](http://stackoverflow.com/questions/18313576/confirmation-dialog-on-ng-click-angularjs) — Lulylulu, Apr 22 '16 at 09:21
First of all, why you dont post all your code for best understanding? And, explain what you whant to achieve for better solutions. — Programador Adagal, Apr 22 '16 at 09:58
I have a page with list of my favourite friends.Below each friend there is an option to mark that friend as unfavourite. So while clicking Un-Favourite button, I need a confirmation window — sulu666, Apr 22 '16 at 10:07

MarcoS · Answer 1 · 2016-04-22T10:03:34.107

3

Simply use ng-confirm-click, like this:

<h4><a href="" confirmed-click="confirmedAction()" ng-confirm-click="Do you confirm?">Un-Favourite</a></h4>

DEMO

UPDATE: For angular directives, see here...

UPDATE 2: I see. You could simply do:

$scope.confirmedAction = function() {
    makeUnfavourite(favourite.userId, $index);
    remove(favouriteData.data.result, $index);
};

edited Apr 22 '16 at 10:03

answered Apr 22 '16 at 09:20

MarcoS

17,323
24
96
174

in my application I have written functons in controller as like below: $scope.getAllFavourite=function(id){-------};. How to write the above functions (app.directive) like i wrote?. I am new to angular – sulu666 Apr 22 '16 at 09:29
Sorry, I don't fully understand... Do you want to write a directive? See my update to answer... But to answer to your question you can just *use* angular.js built-in directive `ng-confirm-click`... – MarcoS Apr 22 '16 at 09:47
but browser shows error that the above two functions are undefined? – sulu666 Apr 22 '16 at 10:54
Marco. if I place the two functions inside $scope.confirmedAction() method, the application did not execute that functios.But when i give like this, it works fine : makeUnfavourite(favourite.userId,$index);remove(favouriteData.data.result,$index);. thanks . But ur directive is working fine – sulu666 Apr 22 '16 at 11:17
@MarcoS, Is there any possibility here to disable system generated the top line which says: **An Embedded page at run.plunk.co says**. – Avnesh Shakya Oct 03 '17 at 09:29

score 1 · Accepted Answer · answered Apr 22 '16 at 10:05

It is easy, you have 2 functions

<a confirmed-click="makeUnfavourite(favourite.userId,$index)" ng-confirm-click="Confirm unfavorite?">Un-Favourite</a>

Now you could call $scope.removefunction inside makeUnFavorite, or, inside confirmed-click, like this:

<a confirmed-click="makeUnfavourite(favourite.userId,$index);remove(favouriteData.data.result,$index);" ng-confirm-click="Confirm unfavorite?">Un-Favourite</a>

I prefer first solution. Complete code:

Controller

var userControllers = angular.module('userControllers', ['ui.bootstrap','gm']);
userControllers.controller('myProfileCtrl', function ($scope, $routeParams, $rootScope, $http, $location, $window, $timeout) {`  
$scope.makeUnfavourite=function(id,index,favourite){
    var indextoremove=index;
    var currentuserid=2;
    var favUserId=id;
    console.log(favUserId);
    var params = {
        currentuserid:2,
        favUserId:id
        };
       if(favUserId){
        $http.post($rootScope.STATIC_URL + 'users/makeUnFavourite', params).success(function(response){
            $scope.favHide=response;
            //here we call the remove function, always inside the $http response for not having async issues
            $scope.remove(favourite,index);
            }).error(function(err){
            console.log("Error"+err);
        });
    }


};
$scope.remove = function(favourite,index){
    favourite.splice(index,1);
};
});

HTML

<a confirmed-click="makeUnfavourite(favourite.userId,$index,favouriteData.data.result)" ng-confirm-click="Confirm unfavorite?">Un-Favourite</a>

EDIT

One more thing, it would be better if you use on $http.post this structure:

$http.post($rootScope.STATIC_URL + 'users/makeUnFavourite').then(function(response){
     //Ok response stuff
}, function(error){
     //Error response stuff
});

Working fine.easy method without using directives. This is what i expect. Thanks — sulu666, Apr 22 '16 at 11:01
Mark Answer as correct for any other user (you could vote too if it helped you) — Programador Adagal, Apr 22 '16 at 11:46
Can we call a function on click of "Cancel" in the confirmation dialog ? — Karthik, Apr 18 '17 at 09:20

score 0 · Answer 3 · answered Sep 12 '20 at 20:51

ng-click return confirm 100% works

in html file call delete_plot() function

<i class="fa fa-trash delete-plot" ng-click="delete_plot()"></i>

Add this to your controller

 $scope.delete_plot = function(){
        check = confirm("Are you sure to delete this plot?")
        if(check){
            console.log("yes, OK pressed")
        }else{
            console.log("No, cancel pressed")

        }
    }

How to add an confirmation window on ng-click Angular

3 Answers3