web-dev-qa-db-ja.com

stopPropagationにAngularJSディレクティブを作成するにはどうすればよいですか？

私は「stopPropagation」を試みて、Twitter内の要素（リンク）がクリックされたときにTwitter Bootstrap navbarドロップダウンが閉じないようにします。このメソッドの使用は一般的です ソリューション 。

Angularでは、ディレクティブがこれを行う場所のように思えますか？ので、私は持っています：

// do not close dropdown on click
directives.directive('stopPropagation', function () {
    return {
        link:function (Elm) {            
            $(Elm).click(function (event) {                
                event.stopPropagation();
            });
        }
    };
});

...しかし、メソッドは要素に属していません：

TypeError: Object [object Object] has no method 'stopPropagation'

私は指令と結び付けます

<li ng-repeat="foo in bar">
  <div>
    {{foo.text}}<a stop-propagation ng-click="doThing($index)">clickme</a>
  </div>
</li>

助言がありますか？

javascriptjqueryangularjsstoppropagation
75
Robert Christian

"現在、一部のディレクティブ（ng：click）はイベントの伝播を停止します。これにより、そのようなイベントのキャプチャに依存する他のフレームワークとの相互運用性が妨げられます。"- リンク

...そして、ディレクティブなしで修正することができました。

<a ng-click="doThing($index); $event.stopPropagation();">x</a>
123
Robert Christian

私はこの方法を使用しました：ディレクティブを作成しました：

    .directive('stopEvent', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if(attr && attr.stopEvent)
                    element.bind(attr.stopEvent, function (e) {
                        e.stopPropagation();
                    });
            }
        };
     });

これは次のように使用できます。

<a ng-click='expression' stop-event='click'>

これは、あらゆる種類のイベントの伝播を停止するより一般的な方法です。

155
Valentyn Shybanov

stopPropagationは、要素自体ではなく、イベントオブジェクトで呼び出す必要があります。以下に例を示します。

compile: function (Elm) {
    return function (scope, Elm, attrs) {
        $(Elm).click(function (event) {
            event.stopPropagation();
        });
    };
}
9
Joseph Silber

次に、イベントの伝播を停止するためのシンプルで抽象的なディレクティブを示します。誰かにとって役に立つかもしれないと思う。停止するイベントを渡すだけです。

<div stopProp="click"></div>

app.directive('stopProp', function () {
  return function (scope, Elm, attrs) {
    Elm.on(attrs.stopProp, function (event) {
        event.stopPropagation();
    });
  };
});
1
Vinny