确定html属性键和值的角度指令

Question

我是角度指令的新手。

我在一张表里有这个代码：

<td ng-repeat="column in ic_dashboard.fields2" ng-show="column.visible" sortable="column.field">                            
<a href="#">
    {{row[column.field]}}
</a>
</td>

这就是如何在javascript:中定义字段2

this.fields2 = [
                    {id: 1, field: "SUB_FLOW_CHECK", title: "c1", visible: false, edit_type: "select", options: [true, false]}, 
                    {id: 2, field: "Partner", title: "c2", visible: true, edit_type: "text"}, 
                    {id: 3, field: "MAX_OFFERS_DISPLAY", title: "c3", visible: true, edit_type: "number"}]

我想要实现的是通过fields2中edit_type成员的值向a标记添加特定的html属性和值。例如，对于edit_type:"number"，输出应该是：

<a editable-number="row[column.field]" href="#">
        {{row[column.field]}}
 </a>

对于edit_type:"text"，输出应为：

<a href="#" editable-text="row[column.field]" e-step="any">
    {{row[column.field]}}
</a>

等等…

据我所知，这里需要一个指令，但不知道如何开始。

谢谢。

Answer 1

我相信ng开关就是您想要的。类似于：

<div ng-switch="column.edit_type">
    <div ng-switch-when="text">
        <a href="#" editable-text="row[column.field]" e-step="any">
            {{row[column.field]}}
        </a>
    </div>
    <div ng-switch-when="number">
        <a editable-number="row[column.field]" href="#">
            {{row[column.field]}}
        </a>
    </div>
    ...and so on
</div>

这个逻辑可以直接写入模板，也可以写入自定义指令。阅读指导指南，很棒！

Answer 2

使用指令，您可以尝试以下操作：

app.directive('myA', function () {
  return {
      restrict: 'A',
      scope:{
        type : '=',
        value: '='
      },
      link: function(scope, element) {
        element.attr('editable-'+scope.type, scope.value);
      }
  };
})

在您的HTML:中

<td ng-repeat="column in fields2" ng-show="column.visible" sortable="column.field">                            
   <a my-a type="column.edit_type" value="row[column.field]">{{row[column.field]}}</a>
</td>