21

ng-click のインターセプターを作成することは可能ですか? バックエンドでオブジェクトの削除につながるボタンまたはリンクがあります。ボタン/リンクに属性を追加するだけで、確認ダイアログ (モーダル) が欲しいです。例えば：

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

これはAngularJSで可能ですか? この問題を解決するためのより良いアプローチはありますか?

編集deleteIt メソッドは異なるコントローラーに存在します。

どうも

4

4 に答える 4

51

I've put an example directive in:

http://plnkr.co/edit/GJwK7ldGa9LY90bMuOfl?p=preview

I achieve it by creating a directive:

  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>

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

Hope that helps.

于 2013-04-25T09:27:04.303 に答える
10

ピランの答えを思い通りに機能させることをあきらめました。代わりに、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思いますが、まだ手をつけていません!

于 2013-09-13T19:05:31.683 に答える
5

私はこれで長い間遊んでいましたが、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/237186​​94/1135826

于 2014-05-17T04:14:38.770 に答える
3

$windowコントローラーに注入して$window.confirm、スコープから使用できるようにすることができます。

<a href="#" ng-click="confirm('message') && deleteIt(id)">Delete</a>
于 2013-04-25T08:20:52.043 に答える