在 ng-repeat (jQuery UI buttonset) 中的编译指令中使用 {{$index}}

Question

在 ng-repeat 列表中，我很难为列表中的每个项目设置一个开/关按钮（使用 JQ UI 包装单选按钮）。

当使用单选按钮时，JQ UI 按钮集似乎需要“输入”和“标签”标签，而且标签的“for”必须与输入的“id”匹配。

我可以使用 {{$index}} 使它们独一无二，如下所示：

<label for='algoOn{{$index}}'>ON</label>
<input type='radio' [... blah blah ..] id='algoOn{{$index}}'>

问题是在 DOM 准备好后调用 $().buttonset() 。我尝试了各种方法（dom.ready、链接功能等），但不得不在延迟 [ $('.buttonme').buttonset() ] 后调用它来触发页面上的所有按钮。哈基。

但是，我想将开/关按钮包装在指令中。在需要唯一 ID 方面仍然存在同样的问题。 （如果您没有唯一的 ID，则在指令的链接函数中每次成功调用按钮都会变得越来越大）

但是...在模板中使用 {{$index}} 会给我一个神秘的语法错误：

Syntax error, unrecognized expression: [for=on{{$index}}] <onoffbtn prop="win.runstate" class="ng-isolate-scope ng-scope">

（即使代码中没有'for=on{{$index}}'！）

指令是首选方法，但无法弄清楚如何绕过这个。

其次，在指令中，所有单选按钮在第一次点击后都是同步的，但是当页面第一次加载时，指令中的按钮都是空白的。它不会立即将自己设置为模型。我想在链接函数中做到这一点（例如元素 -> 查找输入 -> 设置值）但是 Angular 已经重写了所有的“名称”和“ID”。

显示这两个问题的 Plunker 在这里：http://plnkr.co/edit/DTy8dGsRDVVDnWZBYlqQ

谢谢！

Answer 1

就像你说的，这可以通过指令来实现。使用您的 html，我刚刚将 buttonset 添加到包装 div：

<div id='A{{$index}}' buttonset>
  <label for='algoOn{{$index}}'>ON</label>
  <input class="buttonme" type='radio' name='onoff{{$index}}' ng-model='win.runstate' ng-name='onoff' value='running' id='algoOn{{$index}}'>
  <label for='algoOff{{$index}}'>OFF</label>
  <input class="buttonme" type='radio' name='onoff{{$index}}' ng-model='win.runstate' ng-name='onoff' value='stopped' id='algoOff{{$index}}'>
</div>

buttonset 指令的外观如下

angular.module('button', [])
.directive('buttonset', function() {
    return function(scope, elm, attrs) {

      $(function(){
                 $(elm).buttonset();
            });      

    };
  });

这里是plunker，没有更多的黑客攻击:)

更新： 您遇到的错误与 dwbuttonset 指令在 Angular 编译代码之前执行的事实有关。因此，您需要做的是等到这一切完成。您可以将 $timeout 与 0 值一起使用（请参阅此 question），以便将您的方法排队，直到所有内容都已加载。

例子：

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