在 angularjs 中使用 jQuery UI 按钮集

Question

问题说明：为控制器范围数组中的每个元素显示一个 JQ 按钮集。

所以这样的事情是合乎逻辑的：

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

但是... 在 JQ buttonset 中，如果输入/标签对的 id 不是唯一的，则每次指令调用 buttonset() 时，按钮的大小都会增加。例如。如果你在“算法”中有 20 个元素，那么按钮就会很大。

那么如何让id的唯一性呢？我认为 ng-repeat 中的 {{$index}} 会起作用：

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

this Plunker 是一个非常简单的示例，展示了三种情况（正常大小、增长按钮和语法错误）的本质。

感谢所有帮助和 cmets。

丹尼

Answer 1

调用jquery插件的时候好像没有设置for和id属性值

改成：

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

这样你在 dom 元素的 $digest 阶段之后调用插件。