AngularJS ngClick vs binding to click

AngularJS ngClick vs binding to click

本文关键字：to click binding vs ngClick AngularJS      更新时间：2023-09-26

这个问题分为两部分:

第1部分

绑定到事件之间的区别是什么，比如使用ngClick属性的click，与使用element.bind('click') ?例如，我可以写

<div ng-click="doStuff()">

JS 

// Link function of a directive
link: function(scope, element, attrs)
{
    scope.doStuff = function() { // doing stuff //}
}

或者，我可以忽略<div>中的ng-click并直接跳转到指令:

link: function(scope, element, attrs)
{
    element.bind('click', function() 
    {
        // doing stuff
    });
}
第2部分

现在，很明显，在我只能假设的$digest周期中存在差异。我在ng-click上运行了下面的函数来创建一个新条目，然后这个条目被添加了一个类:

$('.cell').removeClass('selected');
scope.shift.createTask(scope.grid);
scope.schedule.modified();
// Wait until the DOM is digested before finding the last entry
$timeout(function(){
    var elem = element.closest('.shift').find('.task:last-child');
    activateTask(elem);
},0);
如果我使用ng-click方法，上面的代码可以正常工作。但是，当我使用element.bind('click')方法时，具有$timeout的最后一个条目不会添加类。它似乎总是落后一个(即第一个task添加，什么都没有发生。添加了第二个task，并且第一个任务获得类)

如果你看一下ngClick的源代码，它会绑定到click事件，并在$apply块中调用该函数:

   ngEventDirectives[directiveName] = ['$parse', function($parse) {
       return {
           compile: function($element, attr) {
            var fn = $parse(attr[directiveName]);
               return function ngEventHandler(scope, element) {
             element.on(lowercase(name), function(event) {
             scope.$apply(function() {
                  fn(scope, {$event:event});
             });
        });
      };
    }
  };
}];

我建议解决你的问题，把更多的$timeout块。很可能有一些代码需要在与$timeout使用的$apply块相同的上下文中:

// Wait until the DOM is digested before finding the last entry
$timeout(function(){
    $('.cell').removeClass('selected');
       scope.shift.createTask(scope.grid);
       scope.schedule.modified();
       var elem = element.closest('.shift').find('.task:last-child');
       activateTask(elem);
   },0);
相关文章：