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