Using AngularJS ng-bind and ng-href together?

Question

Using AngularJS, I noticed a pattern that seems wrong to me.

When building a table, my data is connected using ng-bind. But if I need text in a cell to link to something, the link must be created manually.

An unconnected table cell is as follows:

<td ng-bind="customer.name"></td> 

But if I want to create a link, I:

 <td><a ng-href="/customer/{{customer.id}}">{{customer.name}}</a></td> 

Is there a way to create a link using attributes? Sort of:

 <td ng-bind="customer.name" ng-href="/customer/{customer.id}"></td> 

Answer 1

This is not an AngularJS problem; it's more about how HTML works. HTML does not allow you to simply add the href attribute to any element to create a link. To create a link, you must use the anchor tag.

If you want, you can write a directive that creates the binding in the cells. But this is hardly worth it, and most of them will probably agree that it creates less meaningful, more confusing markup.

HTML Link Specification: http://www.w3.org/TR/html4/struct/links.html

Answer 2

You can use ng-bind , yes, but inside <a> , as @btford said.

 <td><a ng-href="/customer/{{customer.id}}" ng-bind="customer.name"></a></td>