拦截angularJS中的ng-click

c8ib6hqw  于 2022-12-26  发布在  Angular
关注(0)|答案(4)|浏览(186)

是否可以为ng-click编写拦截器?我有一个按钮或链接,导致在后端删除一个对象。我希望通过添加一个属性到按钮/链接来有一个确认对话框(模态)。例如:

<a href="#" ng-click="deleteIt(id)" confirmation-needed>Delete</a>

这在AngularJS中可行吗?有没有更好的方法来解决这个问题?

EDITdeleteIt方法驻留在不同的控制器中。

谢谢

d7v8vwbk

d7v8vwbk1#

我已经在中放入了一个示例指令:
http://plnkr.co/edit/GJwK7ldGa9LY90bMuOfl?p=preview
我通过创建一个指令来实现它:
1.其中priorityngClick高,使得它在ngClick之前被调用,
1.生成terminal这样它就不会调用ngClick
1.监听点击事件,然后评估ngClick值是否消息是OK。
作为奖励,您可以传递自己的消息,例如:

<a href="#" ng-click="deleteIt(id)" 
    confirmation-needed="Really Delete?"
        >Delete with custom message</a>

代码如下所示:

app.directive('confirmationNeeded', function () {
  return {
    priority: 1,
    terminal: true,
    link: function (scope, element, attr) {
      var msg = attr.confirmationNeeded || "Are you sure?";
      var clickAction = attr.ngClick;
      element.bind('click',function () {
        if ( window.confirm(msg) ) {
          scope.$eval(clickAction)
        }
      });
    }
  };
});
btqmn9zl

btqmn9zl2#

我已经放弃了让皮兰的答案按我希望的那样工作,相反,我开始用我自己的指令替换ngClick:

.directive('confirmClick', function() {
    return {
        restrict: 'A',
        link: function(scope, elt, attrs) {
            elt.bind('click', function(e) {
                var message = attrs.confirmation || "Are you sure you want to do that?";
                if (window.confirm(message)) {
                    var action = attrs.confirmClick;
                    if (action)
                        scope.$apply(scope.$eval(action));
                }
            });
        },
    };
})

这个指令甚至没有自己的作用域,这大大简化了它与其他指令的组合。它直接从attrs中获取所需的一切。它的用法如下:

<span ng-show="editing" confirm-click="delete()" confirmation="delete confirmation message goes here">some text</span>

delete()函数必须存在于$scope链中更高的位置,我相信这可以通过更仔细地研究ng-click是如何实现的来改进,但是我还没有抽出时间来研究它!

j9per5c4

j9per5c43#

我玩了很长一段时间,但是Angular的异步特性使得很难指望每个指令都能很好地一起运行。然后,我看到了@tosh的回答,这让我思考了一下。
我认为这结合了几个优点:* * 创建指令并在前面添加ngClick**
因此,只需将此指令添加到应用,然后将"confirm-click"属性添加到链接,并将confirmClick()函数添加到ngClick。
链接:

<a href="#" ng-click="confirmClick() && deleteIt(id)" confirm-click>Delete</a>

指令:

.directive('confirmClick', function() {
    return {
        link: function (scope, element, attrs) {
            // setup a confirmation action on the scope
            scope.confirmClick = function(msg) {
                // msg can be passed directly to confirmClick('are you sure?') in ng-click
                // or through the confirm-click attribute on the <a confirm-click="Are you sure?"></a>
                msg = msg || attrs.confirmClick || 'Are you sure?';
                // return true/false to continue/stop the ng-click
                return confirm(msg);
            }
        }
    }
})

这非常类似于注入标准的confirm()对话框,但是因为您将其包含在一个指令中,所以可以自定义如何选择运行确认对话框(可能是一个漂亮的模态对话框,而不是窗口对话框)。

奖励答案

我对此进行了更多的尝试,并集成了一个使用模态窗口而不是默认窗口作为确认窗口的解决方案。https://stackoverflow.com/a/23718694/1135826

bqucvtff

bqucvtff4#

您可以将$window注入到控制器中,以便可以从作用域使用$window.confirm,然后:

<a href="#" ng-click="confirm('message') && deleteIt(id)">Delete</a>

相关问题