AngularJS结合功能将多个元素

Question

在jQuery中我可以创建一个Web组件，象这样：

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

角度使用指令。当您使用指令时，可以创建/使用它作为HTML属性，元素或Clases。

这里是指令的示例被用来作为一个属性：

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