angularjsangularjs-ng-click

How to add an confirmation window on ng-click Angular


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


Solution

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