angularJs提交前确认ngConfirmClick

半兽人 发表于: 2020-09-19   最后更新时间: 2020-09-19  

在用户确认后对提交进行确认。

  • ng-confirm-click:(expression) 确认要评估的表达式.
  • ng-confirm-message:(template) 在确认对话框中显示的消息.
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>ng-show and ng-hide directives</title>
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
</head>
<body ng-app="app">

    <button ng-confirm-click="count = count + 1" ng-confirm-message="Do you really want to add one to {{count}}?" ng-init="count=0" >
        Increment
    </button>
    <span>
        count: {{count}}
    </span>

    <script type="text/javascript">
        angular.module('app',[]).directive('ngConfirmClick', ["$parse","$interpolate",function ($parse,$interpolate) {
        return {
            restrict:"A",
            priority:-1,
            compile:function(ele,attr){
                var fn = $parse(attr.ngConfirmClick, null,  true);
                return function ngEventHandler(scope, ele) {
                    ele.on('click', function (event) {
                        var callback = function () {
                            fn(scope, {$event: "confirm"});
                        };
                        var message = $interpolate(attr.ngConfirmMessage)(scope) || 'Are you sure?';
                        if(confirm(message)) {
                            if (scope.$root.$$phase) {
                                scope.$evalAsync(callback);
                            } else {
                                scope.$apply(callback);
                            }
                        }
                    });
                }
            }
        }
    }]);
    </script>
</body>
</html>

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: angularJs component与directive的不同
下一条: AngularJS日期格式化