AngularJSは、他のディレクティブが実行されないようにするためにディレクティブを使用します

Question

私のAngularアプリのいくつかのアクションでは、ユーザーを登録する必要があります。ユーザーが登録されていない場合は、"Register modal"を表示し、元のアクションを防止したいと考えています。

これらのアクションは、ng-clickまたはその他の「クリックバインド」ディレクティブ（たとえば、「modal-toggle」）を介してトリガーできます。

だから私はこの解決策を見つけました: https://stackoverflow.com/a/16211108/2719044

これはかなりクールですが、ng-clickでのみ動作します。

私は最初にディレクティブの"terminal"プロパティを動的にしたかったのですが、それを行うことができませんでした。

そのため、"terminal"をtrueに設定し、ディレクティブのデフォルトのクリックアクションを手動で防ぐというアイデアがありました。

ここに私のDOMがあります

<!-- This can work with terminal:true and scope.$eval(attrs.ngClick) (see example above) -->
<div user-needed ng-click="myAction()">Do it !</div> 

<!-- This doesn't work. I can't manage to prevent the modal-toggle to be executed -->
<div user-needed modal-toggle="my-modal-id-yey">Show yourself modal !</div> 

そして、私の指示（動作しません。..)

// First try (with terminal:true)
app.directive('userNeeded', function() {
    return {
        priority: -100,
        terminal: true,
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(isRegistered()) {
                    // Here we do the action like scope.$eval or something
                }
            });
        }
    };
});

// Second try (with stopPropagation)
app.directive('userNeeded', function() {
    return {
        priority: -100
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(!isRegistered()) {
                    e.stopPropagation();
                }
            });
        }
    };
});

...だから私はここにいる何か考えは?

本当にありがとう。.

Answer 1

あなたは非常に近かった。StopPropagationの代わりに停止する必要がありましたイミディエイト伝播。この2つの違いは次のように要約されています。 このStackOverflowの答え @Daveによって:

stopPropagation を防ぐことができます 親 であることからのハンドラー 実行されている間 stopImmediatePropagation 同じことをします しかし、 また、 他のハンドラーが実行されないようにします。

したがって、コードを修正するには、そのメソッドを交換してボイルするだけです:

app.directive('userNeeded', function() {
    return {
        priority: -100
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(!isRegistered()) {
                    e.stopImmediatePropagation();
                }
            });
        }
    };
});

ここには プランカーの例 作業コードの。この例では、特定のイベントを指定できるようにディレクティブを少し変更しました（次のような user-needed="submit")に直接値を渡すことによって element.bind 機能;ただし、デフォルトでは「クリック」になります。