1

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

我问这个是因为使用 htmlonclick属性通常被认为是一种不好的做法，那么为什么 Angular 使用这种方法呢？

4

4 回答 4

3

你的困惑来自对背后的误解onclick和ng-click。虽然它们都是属性，但它们是由不同的实体处理的。前者是在DOM元素发生点击事件时添加事件监听器触发回调的方式。此属性由浏览器处理，您在此属性中指定的回调由浏览器执行。后者被称为属性形式的角度指令，浏览器对此一无所知。它由框架处理，一些逻辑，如触发事件处理程序，由框架设置。如果您不使用该框架，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，该函数将自定义回调绑定到clickDOM 的事件：

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

The magic behind two way binding is digest cycle.

  1. What is $apply? $apply takes you from javascript context to angular context. Internally uses $digest(triggers digest cycle).

So, Javascript - $apply - digest cycle - view.

Difference between $(element).on('click', callback) and 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 implentation

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)

是 JavaScript 中的代码，使用 jQuery。

ng-click = "myFunction()"

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

onclick = "myFunction();"

是调用函数的“旧”HTML 方式。

于 2016-10-12T19:20:30.203 回答