4

このフィドルでは、トップ リンクの ngClick が機能するのに、カスタム ディレクティブを追加したリンクの ngClick が完全に機能しないのはなぜですか?

<a class="regular" ng-click="clickTheLink()">A regular ng-click link</a>
<a class="disableable" disable="disableTheLink" ng-click="clickTheLink()">A disableable link!</a>

私が知る限り、ディレクティブで行っていることは、CSS クラスを操作するだけなので、ngClick の動作にまったく干渉するべきではありません。

app.directive('disableable', function(){
  return {
    restrict: 'C',
    scope: { disable: '&' },
    link: function (scope, elem, attrs) {
        scope.$watch(scope.disable, function (val) {
            if (val){
                elem.addClass('disabled');
                elem.removeClass('enabled');
            }
            else {
                elem.addClass('enabled');
                elem.removeClass('disabled');
            }
        });
    }
  };
});
4

2 に答える 2

2

これは、フィドルの 14 行目に分離スコープを作成しているためです。clickTheLink 関数はコントローラーにのみ存在し、ディレクティブには存在しません。このようにしないことを強くお勧めしますが、 $parent を介して親スコープにすばやくアクセスできます

        <a class="disableable" target="_blank" disable="disableTheLink" ng-click="$parent.clickTheLink()">A disableable link!</a>

このコードを挿入すると、フィドルが正しく機能します。これがそのフィドルです：http://jsfiddle.net/bpN9b/10/

私の提案は、ngClass と ngDisabled がどのように機能するかを調べることです。どちらも、このディレクティブをまったく使用しないようにすることができると思います。

于 2013-05-23T02:02:50.993 に答える
2

つまり、各 DOM 要素には 1 つのスコープしかありません。したがって、ここで使用しているようなディレクティブが分離スコープを使用している場合、それが要素の唯一のスコープになります。そのスコープは親スコープから完全に切断されており、あなたの例でclickTheLinkはそこにありません。

簡単な答えは、分離スコープを使用しないことです。これは非常に優れた構文ですが、すべて手動で行うことができます。「&」パラメーターの場合、解析サービスを使用して属性式を解析できます。

更新された作業フィドルを参照してください: http://jsfiddle.net/SNQQV/3/

于 2013-05-23T02:06:12.520 に答える