1

ng-click="f()"angularが ではなく、クリック イベントの処理に属性を使用するのはなぜ$(el).on('click', f)ですか?

htmlonclick属性を使用することは一般的に悪い習慣と見なされているため、これを尋ねているのに、なぜ Angular はこのアプローチを使用するのでしょうか?

4

4 に答える 4

3

あなたの混乱は、背後にあるものonclickとng-click. どちらも属性ですが、異なるエンティティによって処理されます。前者は、DOM 要素でクリック イベントが発生したときにコールバックをトリガーするイベント リスナーを追加する方法です。この属性はブラウザによって処理され、この属性で指定されたコールバックはブラウザによって実行されます。後者は属性の形で angular ディレクティブと呼ばれ、ブラウザはそれについて何も知りません。これはフレームワークによって処理され、イベント ハンドラーのトリガーなどのロジックがフレームワークによって設定されます。フレームワークを使用しない場合、ng-click無人でそこに住むことになり、clickイベントでコールバックが実行されなくなります。

ngClickディレクティブの関連部分は次のng-clickとおりです。属性を処理するときにフレームワークによって実行されるコードです。

ngEventDirectives['ngClick'] = ['$parse', '$rootScope', function($parse, $rootScope) {
    return {
        restrict: 'A',
        compile: function($element, attr) {
            // fn "points" at the function you specified in the `ng-click`
            // and will be executed below when a click event occurs
            var fn = $parse(attr['ngClick'], null, true);
            return function ngEventHandler(scope, element) {
                element.on(eventName, function(event) {
                    var callback = function() {
                        // here `fn` is being executed
                        fn(scope, {$event:event});
                    };
                    if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
                        scope.$evalAsync(callback);
                    } else {
                        scope.$apply(callback);
                    }
                });
            };
        }
    };
}];

angular がng-click属性を処理するとき、カスタム コールバックをDOMngEventHandlerのイベントにバインドする関数を実行することがわかります。click

element.on(eventName, function(event) {

于 2016-10-12T19:25:35.007 に答える
2

DOM 要素の「onclick」プロパティを設定すると、値は割り当てたとおりになります。ブラウザは、HTML ソースで「onclick」属性を作成するときと同じ「文字列を関数に変換する」操作を実行しません。

「ng-」プロパティは Angular コードによって解釈され、文字列を関数の本体として扱うなど、イベント ハンドラーを設定するために必要なことは何でも実行できます。

DOM の「onclick」プロパティを介してイベント ハンドラーを設定する場合は、文字列ではなく関数を割り当てる必要があります。

foo.onclick = myFunction;

また

foo.onclick = function() { myFunction(someArgument); };
于 2016-10-12T19:20:32.227 に答える
0

背後にある魔法two way bindingはdigest cycle.

  1. とは$apply? $applyからjavascript contextに移動しangular contextます。内部で使用します$digest(トリガー ダイジェスト サイクル)。

だから、Javascript - $apply - digest cycle - view。

$(element).on('click', callback)との違いng-click。

1.$(element).on('click', callback)

$(element).on('click', function(){
  //do your stuff
  //It is in Javascript context
  //Not known to angular
})

2.ng-click実装

element.on(eventName, function(event) { //Here, event name is 'click'
   var callback = function() {
     fn(scope, { $event: event });
   };       
   scope.$apply(callback); //Here, ng-click wraps your code in $apply  to take you from javascript context to angular context (Triggers digest cycle).
});
于 2016-10-12T20:48:07.750 に答える
-2 
$("#my-button").on('click', myFunction)

jQueryを使用したJavaScriptのコードです。

ng-click = "myFunction()"

タグの属性を読み取る AngularJS の機能を使用しています。

onclick = "myFunction();"

は、関数を呼び出す「古い」HTML の方法です。

于 2016-10-12T19:20:30.203 に答える