JS-angular为什么使用“ng click=”;f(）"`属性，而不是`$(el）.on('cl

JS - Why does angular use an `ng-click="f()"` attribute for handling click events, instead of `$(el).on('click', f)`?

本文关键字：el cl on 属性 为什么 click quot JS-angular ng      更新时间：2023-09-26

为什么angular使用ng-click="f()"属性而不是$(el).on('click', f)来处理单击事件？

我之所以这么问，是因为使用html onclick属性通常被认为是一种糟糕的做法，那么Angular为什么要使用这种方法呢？

您的困惑源于误解onclick和ng-click背后的内容。尽管它们都是属性，但它们由不同的实体处理。前者是在DOM元素上发生单击事件时添加事件侦听器以触发回调的方法。此属性由浏览器处理，而在此属性中指定的回调由浏览器执行。后者以属性的形式被称为angular directive，浏览器对此一无所知。它由框架处理，一些逻辑，如触发事件处理程序，由框架设置。如果您不使用该框架，那么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属性时，它执行函数ngEventHandler，该函数将自定义回调绑定到DOM:的click事件

element.on(eventName, function(event) {

当您设置DOM元素的"onclick"属性时，该值与您分配的值完全相同。浏览器不会执行与在HTML源中创建"onclick"属性时相同的"将字符串转换为函数"操作。

"ng-"属性由Angular代码解释，它可以执行任何设置事件处理程序的操作，包括将字符串视为函数体。

如果您想通过DOM"onclick"属性设置事件处理程序，则必须分配函数，而不是字符串：

foo.onclick = myFunction;

或

foo.onclick = function() { myFunction(someArgument); };

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).
});

$("#my-button").on('click', myFunction)

是一个使用jQuery的JavaScript代码。

ng-click = "myFunction()"

正在使用AngularJS读取标签属性的能力。

onclick = "myFunction();"

是调用函数的"老"HTML方式。

相关文章：