javascript - Angularjs 何时何地绑定(bind)事件

Question

我仍在学习 Angularjs，我想在动态模板上绑定(bind)事件，我应该在何时何地以 Angularjs 的方式进行设置？除了直接放在模板中 ng-click

//template
<div ng-repeat="person in people"><span class="person" id="{{person.id}}" >{{person.name}}</span></div>

//Jquery version
$('.person').click(function(){
  //get attribute value
  //do stuff
});

//Angular version - where should I put this
angular.element('.person').on('click', function() {
  //get attribute value
  //do stuff
});

Answer 1

在 AngularJS 中，您应该仅关注可视组件(指令)中的 DOM。在其他任何地方你都不应该知道关于 DOM 的任何事情——有哪些元素，它们是如何组成的等等。这是 Angular 中最酷的主要事情之一——你可以在不改变 JS 的情况下改变模板。

所以这种分离是这里的关键点。在 AngularJS 中，您应该将连接到 DOM 的所有内容直接放在模板中(附加事件监听器、绑定(bind)到模型等)。

但是，在指令内部，您可以将事件监听器绑定(bind)和取消绑定(bind)到 DOM 元素:

angular.directive('test', function() {
   return {
      restrict:'E',
      link: function(scope, element,attr) {
          element.on('click', function() { console.log(attr.value); })
      }
   }
}

但是我想建议考虑使用标准指令 (ng-click) 来处理标准事件并绑定(bind)到 Controller 的方法。