javascript - 在 angularjs 中使用 jQuery UI 按钮集

Question

问题陈述:为 Controller 范围数组中的每个元素显示一个 JQ 按钮集。

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

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

但是...在 JQ Buttonset 中，如果输入/标签对的 id 不唯一，则每次指令调用 Buttonset() 时，按钮的大小都会增大。例如。如果“algos”中有 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 .

感谢所有帮助和评论。

丹尼

Answer 1

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

将其更改为:

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

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