Question

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

当使用单选按钮时，JQ UI按钮组似乎需要“input”和“label”标签以及标签的“for”必须与输入的“id”匹配。

我可以使用{{$ index}}使它们与众不同，如下所示：

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

问题是在DOM准备就绪后调用$（）。buttonset（）。我尝试了各种各样的东西（dom.ready，link function等），但是在延迟[$（'。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}}'！）

该指令是首选方法，但无法弄清楚如何解决这个问题。

其次，在指令中，所有单选按钮在第一次单击后都是同步的，但是当页面首次加载时，指令中的按钮都是空白的。它不会立即将自己设置为模型。我想在链接函数中做到这一点（例如。element - ＆gt;找到输入 - >设置值）但angular已经重写了所有'names'和'ids'。

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();
      });        
}})

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

1 个答案: