ng-repeat, директива и щелчок. Как они сочетаются?

Я хочу поймать событие нажатия кнопки. Идентификатор кнопки динамически генерируется внутри 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 раза и тд.


angularjs pug angularjs-directive angularjs-ng-repeat ng-repeat
person Sangram Singh    schedule 26.09.2013    source источник
comment
Почему нельзя использовать ng-click? Кроме того, идентификатор не должен содержать пробелов, это не похоже на класс, где его может быть несколько (см. stackoverflow.com/questions/192048/)   -  person TheSharpieOne    schedule 26.09.2013
comment
для манипуляций с DOM рекомендуются директивы. Я хочу изменить CSS одним нажатием кнопки. Я не использую пробел в ids   -  person Sangram Singh    schedule 26.09.2013
comment
К сожалению, форматирование было отключено, и оказалось, что поле id содержит пробелы.   -  person TheSharpieOne    schedule 27.09.2013
comment
Если вы используете Jade, подумайте о добавлении соответствующего тега.   -  person vittore    schedule 27.09.2013

Ответы (1)


arrow_upward
5
arrow_downward

Основная проблема с установкой директивы в элементе упаковки заключается в том, что директива будет запущена до того, как 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/

person TheSharpieOne    schedule 26.09.2013
comment
$(element).on('click', 'button', function () { великолепен. Спасибо @thesharpieone! ты жжешь! - person Sangram Singh; 27.09.2013
comment
Жаль, что параметры селектора не поддерживаются реализацией jqlite angular - person ErikAGriffin; 30.01.2017