ng-repeat，指令和点击。它们如何结合？

Question

我想捕获按钮的点击事件。 button的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 3 3 次等等。

Answer 1

在包装元素上设置指令的主要问题是该指令将在ng-repeat 展开之前运行。所以在调用on 方法时元素中没有按钮。您可以稍微不同地使用on 方法，使其更像旧的jquery live 方法。将它应用到父元素并传递一个可选的选择器（在你的情况下，'button'）来告诉它要触发哪些元素。这也适用于添加和删除按钮。

$(element).on('click', 'button', function () {
    // do something here.
    alert($(this).text() + ' clicked');
});

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="myDir">
        <button ng-repeat="button in buttons" id="{{button}}">Button {{button}}</button>
    </div>
</div>

JS：

var app = angular.module("myApp", []).directive('myDir', function () {
    var linkFn = function (scope, element, attrs) {
        $(element).on('click', 'button', function () {
            alert($(this).text() + ' clicked');
        });
    }

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

function myCtrl($scope) {
    $scope.buttons = ['4', '3', '2', '1'];
}

小提琴：http://jsfiddle.net/JjB3B/