AngularJS 绑定函数到多个元素

Question

在 jQuery 中，我可以像这样创建一个网络组件：

jQuery

<script>
$(document).on('click', 'm-button[alert]', function(e){
    alert($(this).attr('data-message');
});
</script>

HTML

<m-button alert data-message="Hello World!">Say Hello</m-button>
<m-button alert data-message="Goodbye World!">Say Bye</m-button>

当我点击上面的任何一个按钮时，我会收到一个警告，其中包含 data-message 属性中定义的文本。

在 Angular 中执行此操作的最佳做法是什么？一种方法是将 ng-click 分配给每个 <m-button>，有没有更好更有效的方法？

Answer 1

Angular 使用指令。当您使用指令时，它可以是 created/used 作为 HTML 属性、元素或类。

这是一个将指令用作属性的示例：

<div ng-controller="MyController">
    <button alert data-message="Hello World!">Click Me</button>
</div>

//... angular app previously declared and created
app.directive('alert', function() {
    return {
        link: function(scope, element, attrs) {
          element.click(function(){
            alert(attrs.message);
          }); 
        }
    }
});

AngularJS 绑定函数到多个元素

AngularJS binding function to multiple elements

javascript

jquery

angularjs

angularjs-ng-click