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倍等.

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/