Используя набор кнопок jQuery UI в angularjs

Question

Постановказадачи: показать набор кнопок JQ для каждого элемента в массиве контроллера.

Так что-то вроде этого было бы логично:

<div ng-repeat='a in algos' mybuttonset>
   <input name='X' id='A'><label for='A'>
</div>

Но... В JQ buttonset, если id пар ввода / метки не уникален, каждый раз, когда директива вызывает buttonset(), размер кнопки увеличивается. например. Если у вас есть 20 элементов в "algos", кнопки огромны.

Так как сделать идентификатор уникальным? Я думал, что {{$index}} внутри ng-repeat будет работать:

<div ng-repeat='a in algos' mybuttonset>
   <input name='X' id='A{{$index}}'><label for='A{{$index}}'>
</div>

Но в этом случае angular сообщает об ошибке синтаксиса:

Syntax error, unrecognized expression: [for=A{{$index}}] <div ng-repeat="a in algos" dwbuttonset="" class="ng-scope ui-buttonset">

Очень простой пример, демонстрирующий суть трех случаев (нормальный размер, растущие кнопки и синтаксическая ошибка), находится на этом Plunker.

Вся помощь и комментарии приветствуются.

Дэнни

Answer 1

Кажется, что значения атрибутов for и id не устанавливаются при вызове плагина jquery.

Измените это на:

.directive('dwbuttonset', function() {
    return function(scope, elm, attrs) {
    setTimeout(function() {
      (elm).buttonset(); 
    },0);
    };
});

Таким образом, вы вызываете плагин после фазы $digest элементов dom.