2

我想捕获按钮的单击事件。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 33次以此类推。

4

1 回答 1

5

在包装元素上设置指令的主要问题是指令将在ng-repeat展开之前运行。所以on调用方法时元素中没有按钮。您可以on稍微不同地使用该方法，使其更像旧的 jquerylive方法。将它应用到父元素并传递一个可选的选择器（在你的情况下，'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/

于 2013-09-26T20:11:57.653 回答