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 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/

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

1 个答案: