Javascript angularjs中的确认对话框

如何在angularjs的下方按钮中应用确认对话框

<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button>

---

我会将消息位与删除操作位分开，这样您就可以在应用程序的其他部分重新使用确认位： 我使用这样的指令：

angular.module('myModule').directive("ngConfirmClick", [
  function() {
   return {
     priority: -1,
      restrict: "A",
      link: function(scope, element, attrs) {
        element.bind("click", function(e) {
          var message;
          message = attrs.ngConfirmClick;
          if (message && !confirm(message)) {
           e.stopImmediatePropagation();
           e.preventDefault();
          }
        });
      }
    };
  }
]);

然后让控制器执行删除操作：

$scope.removeUser(index) {
  //do stuff
}

在视图中，我将使用ng单击：

<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span>

删除

希望对您有所帮助。

您可以试试这款plunker： 您可以为对话框创建一个指令

var app = angular.module('plunker', []);

 app.controller('MainCtrl', function($scope, $window) {

   $scope.delete = function(id) {
     $window.location.href = 'delete/'+ id;
   }
 });

 app.directive('ngConfirmClick', [
    function(){
        return {
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

以下是片段

你的HTML应该是怎样的

<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>

基于上述删除函数的角度范围

$scope.removeUser = function(index) {
    vm.users.splice(index, 1);
}

---

完美答案！！bind已被弃用。改用on。

var app = angular.module('plunker', []);

 app.controller('MainCtrl', function($scope, $window) {

   $scope.delete = function(id) {
     $window.location.href = 'delete/'+ id;
   }
 });

 app.directive('ngConfirmClick', [
    function(){
        return {
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>

app.directive('ngConfirmClick', [
    function(){
        return {
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

$scope.removeUser = function(index) {
    vm.users.splice(index, 1);
}