吴拦截单击angularJS

问题描述

是可以写入NG单击一个拦截器？
我有一个按钮或导致缺失在后端的对象的链接。我想只需添加一个属性按钮/链接有一个确认对话框（模式）。例如：

is it possible to write an interceptor for ng-click?I have a button or a link that leads to a deletion of an object in the backend. I'd like to have a confirmation dialog (modal) by just adding an attribute to the button/link. E.g.:

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

这可能与AngularJS？有没有更好的办法解决做这个问题？

Is this possible with AngularJS? Is there a better approach do solve this issue?

修改的deleteIt方法驻留在不同的控制器。

EDIT The deleteIt method resides in different controllers.

THX

推荐答案

我已经把一个例子中的指令：

I've put an example directive in:

<一个href=\"http://plnkr.co/edit/GJwK7ldGa9LY90bMuOfl?p=$p$pview\">http://plnkr.co/edit/GJwK7ldGa9LY90bMuOfl?p=$p$pview

我通过创建一个指令实现它：

I achieve it by creating a directive:

1. 具有更高的优先级比 ngClick ，以便它能够在 ngClick ，


2. 制作了端子，以便它不叫 ngClick 。


3. 监听点击事件，然后如果消息是确定的评估 ngClick 值。

1. with a higher priority than ngClick, so that it gets called before ngClick,
2. making that terminal so that it doesn't call ngClick.
3. listening to click events, and then evaluating the ngClick value if the message is ok.

作为奖励，你可以在你自己的信息传递，如：

As a bonus, you can pass in your own message, such as:

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

在code是这样的：

The code looks like this:

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

希望有所帮助。

这篇关于吴拦截单击angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！