7

モデル値に基づいてリンクを無効にしようとしているディレクティブを次に示します。

app.directive('disableable', function($parse){
    return {
        restrict: 'C',
        require: '?ngClick',
        link: function (scope, elem, attrs, ngClick) {
            if (attrs.disable){
                var disable = $parse(attrs.disable);

                elem.bind('click', function (e) {
                    if (disable(scope)){
                        e.preventDefault();
                        return false;
                    }

                    return true;
                });

                scope.$watch(disable, function (val) {
                    if (val){
                        elem.addClass('disabled');
                        elem.css('cursor', 'default');
                    }
                    else {
                        elem.removeClass('disabled');
                        elem.css('cursor', 'pointer');
                    }
                });
             }
         }
     };
});

単純な hrefs または ngClick アクションを使用するかどうかに関係なく、すべてのリンク アクションを無効にできるようにしたいと考えています。preventDefault 呼び出しにより、Href は正常に動作しますが、ngClick を掘り下げて発火を防ぐ方法がわかりません。ngClick が制御できない独自のハンドラーをバインドしているように見えるため、クリックイベントで実行しているバインドが機能していません。何か私にできることはありますか？

jsFiddle: http://jsfiddle.net/KQQD2/2/

4

3 に答える 3

9

を使用しevent.stopImmediatePropagationます。

MDNから:

複数のリスナーが同じイベント タイプの同じ要素にアタッチされている場合、それらは追加された順に呼び出されます。そのような呼び出し中に event.stopImmediatePropagation() が呼び出された場合、残りのリスナーは呼び出されません。

...
elem.bind('click', function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});
...

働くフィドル

于 2013-07-24T10:12:50.223 に答える
0

私はおそらく少し異なるタックを取るでしょう。別のディレクティブを使用して ng-click をこじ開けようとする代わりに。独自のバージョンの ng-click を作成して代わりに使用すると、別の属性を使用してオン/オフを切り替えることができます。それを行った場合、これを行うために上で書いたコードをあまり変更する必要はなく、ng-click の代わりにそのディレクティブを使用するだけで済みます。

app.directive('enabled-click', function() {
    return {
       scope: {
          enabledClick: '&',
          enabled: '='
       },
       restrict: 'A',
       link: function( scope, element, attributes ) {
           element.bind('click', function(event) {
               if( scope.enabled ) {
                  if( element.target ) {
                     return true; // external link
                  } else {
                     scope.enabledClick();
                     return false;
                  }
               } else {
                  event.preventDefault();
                  return false;
               }
           } );
           scope.$watch( 'enabled', function(val) {
               if( val ) {
                  element.removeClass('disabled');
               } else {
                  element.addClass('disabled');
               }
           });
       }
    };
});

それを使用するには：

<a href="#something" enabled-click="doSomething()" enabled="!disable">Blah</a>
于 2013-07-24T02:54:14.723 に答える