在 ng-repeat 中使用指令

Question

我正在尝试获得一个非常简单的 ng-repeat，它使用 repeat 中的指令，这些指令具有基于重复项的属性值。

我已经尝试过calling an angularjs attribute directive from inside an ng-repeat中的建议：

<tr ng-repeat="tagName in tagNames">
  <th>{{tagName}}</th>
  <td><div mass-autocomplete><input type="text" ng-model="tag.tagName" 
           mass-autocomplete-item="tag_options_fn" 
           dynamic-options="tagName" /> RE? 
       <input type="checkbox" ng-checked="re.tagName"/>  
       {{tagValuesMatchCount(tagName)}}</div></td>
</tr>

但这只是将文字“tagName”放在每一行中。

我尝试编写自己的指令（包括对 MassAutocomplete 的一些自定义更改），以便我可以编写：

<tr ng-repeat="tagName in tagNames">
  <td>{{tagName}}</td>
  <td><div tag-selection tagk="{{tagName}}"/></td>
</tr>

指令是：

.directive('tagSelection', function() {
    return {
        scope: {
            tagk: '@'
        },
        template: '<div mass-autocomplete><input type="text" \
             ng-model="tag.{{tagk}}" \
             mass-autocomplete-item="tag_options_fn" \
             dynamic-options="{{tagk}}"/> RE? \
             <input type="checkbox" ng-checked="re.{{tagk}}"/> \
             {{tagk}}</div>'
    }
})

但是 ng-model 部分在使用 {{tagk}} 时会出错（如果我使用文字就可以了）。最后我也没有得到方法绑定。

我很确定我可以使用一些巧妙的变量范围来完成这项工作，但我发现 doco 在这方面很混乱。

我可以在没有自定义指令的情况下使用纯 ng-repeat 执行此操作吗？或者我可以对自定义指令进行更改以使其正常工作吗？

我想要的输出（给定 tagNames = ["host","user","method"]）是：

<tr>
    <th>host</th>
    <td><div mass-autocomplete><input type="text" ng-model="tag.host" 
          mass-autocomplete-item="tag_options_fn" 
          dynamic-options="host" /> RE? 
          <input type="checkbox" ng-checked="re.host"/> 
          {{tagValuesMatchCount("host")}}</div></td>
</tr>
<tr>
    <th>user</th>
    <td><div mass-autocomplete><input type="text" ng-model="tag.user" 
           mass-autocomplete-item="tag_options_fn" 
           dynamic-options="user" /> RE? 
           <input type="checkbox" ng-checked="re.user"/> 
           {{tagValuesMatchCount("user")}}</div></td>
</tr>
<tr>
    <th>method</th>
    <td><div mass-autocomplete><input type="text" ng-model="tag.method" 
           mass-autocomplete-item="tag_options_fn" 
           dynamic-options="method" /> RE? 
           <input type="checkbox" ng-checked="re.method"/> 
           {{tagValuesMatchCount("method")}}</div></td>
</tr>

Plunker 可用here

Answer 1

以下是正确的版本。

          <tr>
          <td colspan="2"><b>Actual output</b></td>
        </tr>
        <tr ng-repeat="tagName in tagNames">
            <td>{{tagName}}</td>
            <td><div tag-selection tagk="tagName"></div></td>
        </tr>

指令定义

   .directive('tagSelection', function() {
            return {

                template: '<div mass-autocomplete><input type="text" ng-model="tag[tagName]" mass-autocomplete-item="tag_options_fn" dynamic-options="{{tagName}}"/> RE? <input type="checkbox" ng-checked="re[tagName]"/> {{tag[tagName]}}</div>'
            }
        })

Here 是骗子http://plnkr.co/edit/QeFOHqM1oYtif47RKDFa?p=preview