Wie fügt man Links in allen Zellen einer Tabelle in Angular hinzu?

Question

Ich habe derzeit eine Tabelle mit ng-Wiederholung in Angular. Der Zellenwert wird durch eine Variable im Bereich festgelegt.

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

Was würde ich tun möchte, ist dies am Ende haben:

<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> 

So habe ich eine Richtlinie, um das zu tun, aber ich gehe nicht überall mit ihm. Ich habe versucht, jedes Kind des tr-Elements zu erhalten, umschließe dann das HTML der (td) -Kinder mit einem Tag, aber es scheint, dass die Bindung das Tag entfernt und durch den Vanilla-Elementtitel und -Feld ersetzt.

Hier ist mein Code so weit, der das a-Tag mit einer Statuswebsite auf dem ersten td-Tag (Titel) setzt, aber es kann nicht funktionieren.

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

Vielen Dank!

Answer 1

Richtlinie

.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>