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类(class)my-dir可以放在 ng-repeat 的范围内或之外

情况 1:我的目录在 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 中

(在 Controller 中)$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'];
}

fiddle :http://jsfiddle.net/JjB3B/