我还在学习Angularjs,我想在动态模板上绑定事件的时间和地点我应该把它放在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
});
答案 0 :(得分:5)
在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
)来处理标准事件并绑定到控制器的方法。
答案 1 :(得分:2)
为你准备了一个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);
});
},
};
});