angularjs - ng-repeat、ディレクティブ、およびオンクリック。それらはどのように組み合わされますか？

Question

ボタンのクリックイベントをトラップしたい。ボタンの id は、ng-repeat 内で動的に生成されます。

.set(ng-repeat='button in ['4', '3' , '2', '1' ]')
   button(id='{{$index}}') button {{button}}

ボタン 4
ボタン 3
ボタン 2
ボタン 1

上記のどこにmy-dirディレクティブの属性/クラスを配置しますか?

.my-dir
  .set ...

上記は機能しません。

と

.my-dir.set ...

リンク関数を複数回実行します。

/* 上記のステートメントが十分に明確でない場合は、コードの下に詳細を記載します */

ディレクティブは

myApp.directive('myDir', function() {
var linkFn = function(scope, element, attrs) {

  alert('inside linkFn');
  $('button').on('click', function() { alert('button clicked');});
} 

  return {
    restrict: 'C', 
    link: linkFn
  }
});

ng-repeatクラスを使用してmy-dir、ng-repeat のスコープ内またはその外側に配置できます

ケース 1: my-dir が ng-repeat の範囲外にある

.my-dir
  .set(ng-repeat='button in buttons')
    button(id='id{{$index}}') {{item}}

上記のコード$('.set').on('click', function() { alert('button clicked');});は実行されません!

ケース 2: my-dir が ng-repeat 内にある

(コントローラー内)$scope.buttons=['4', '3', '2', '1']

.set(ng-repeat='button in buttons').my-dir
    button(id='id{{$index}}') button {{item}}

button 4「クリックされたボタン」を押すと、アラートボックスに4回表示されるようになりました。button 33回など。