Angularjs绑定事件的时间和位置

Angularjs When and Where to bind events

本文关键字：位置 时间 绑定 事件 Angularjs      更新时间：2023-09-26

我仍在学习Angularjs，我想在动态模板上绑定事件，我应该在何时何地以Angularjs的方式进行绑定？除了直接把它放在模板中点击

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

在AngularJS中，您应该只关心视觉组件（指令）中的DOM。在其他任何地方，您都不应该了解DOM——有哪些元素，它们是如何组成的等等。这是Angular中最酷的事情之一——您可以在不更改JS的情况下更改模板。

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

但是，在Directives中，您可以将事件侦听器绑定到DOM元素并解除绑定：

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

不过，我想建议您考虑使用标准指令（ng-click）来处理标准事件并绑定到控制器的方法。

为您准备了一个代码笔。希望能回答你的问题

Codepen

HTML:

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

JS:

app.directive('click', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                alert('Clicked on ID : '+ attrs.id);
            });
        },
    };
});
相关文章：