Question

这是一个两部分问题：

第1部分

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

HTML

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

JS

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

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

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添加，第一个任务获得类）

Answer 1

如果查看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);

AngularJS ng点击vs绑定点击

1 个答案: