Question

我目前在Angular中使用ng-repeat制作了一个表。单元格值由范围内的某个变量设置。

<tbody>
  <tr ng-repeat="item in items" myDirective>
    <td>{{item.title}}</td>
    <td>{{item.field}}</td>
  </tr>
</tbody>

我想做的是最终得到这个：

<tbody>
  <tr ng-repeat="item in items" myDirective>
    <td><a href="{{item.link}}">{{item.title}}</a></td>
    <td><a href="{{item.link}}">{{item.field}}</a></td>
  </tr>
</tbody>

所以我创建了一个指令，但是我没有去任何地方。我试图获取tr元素的每个子元素，然后用标记包围（td）子元素的html，但似乎绑定删除了标记并将其替换为vanilla item title和field。

到目前为止，这是我的代码，它是在第一个td标记（标题）上设置带有状态网站的标记，但无法使其正常工作。

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        var cellules = element.children(); // get td elements
        angular.element(cellules[0]).html($compile('<a href="http://website">' + angular.element(cellules[0]).html() + '</a>')(scope)); // surround title with a link
      }
    };
  });

谢谢！

Answer 1

指令，

.directive('myDirective', function () {
    return {
        restrict: 'A',
        scope:{
            link:'=link',
            title:'=title'
        },
        template:'<a href={{link}}>{{title}}</a>'
    };
});

HTML，

<table>
  <tr ng-repeat='item in items'>
    <td my-directive link='item.link' title='item.title'></td>
    <td my-directive link='item.link' title='item.field'></td>
  </tr>
</table>

如何在Angular中的表的所有单元格中添加链接？

1 个答案: