如何使用Angular有条件地向元素添加属性？（不仅限于属性数据，而是整个属性）
问题的原因是在Angular中，如果想要根据条件动态地向元素添加属性，通常会使用ng-if结合属性的包含/排除来处理。例如，考虑一个表格行，需要根据某个布尔字段foo的值来决定是否显示一个链接Edit，并且该链接的属性应该根据foo的值来动态添加。
为了解决这个问题，我们可以使用ng-if指令结合条件表达式来控制元素的显示和隐藏。根据item.foo的值，我们可以在a元素上添加或移除custom-attr属性。
以下是解决方法的示例代码：
<tr ng-repeat="item in items">
<td>
<a href="#/edit?id=foo" ng-if="item.foo" custom-attr="foo">Edit</a>
<a href="#/edit?id=foo" ng-if="!item.foo">Edit</a>
</td>
<!--other columns -->
</tr>
你可以在Plnkr链接中查看完整的示例代码和运行效果。
通过使用ng-if指令和条件表达式，我们可以根据条件动态地向元素添加或移除属性，从而实现元素的属性的条件性设置。
问题的出现原因：
在Angular中，有时候我们需要根据某些条件来动态地向元素中添加属性。这个问题中，我们需要根据某个条件来添加一个完整的属性，而不仅仅是属性数据。例如，我们希望根据某个条件来决定是否给一个标签添加href属性。
解决方法：
在这个问题中，我们可以使用Angular的指令来实现根据条件添加属性的功能。我们可以在指令的link函数中使用elem.attr()方法来添加属性。具体的解决方法如下所示：
return {
scope : {
link : '=myLink'
},
link: function(scope, elem) {
if (scope.link.url) {
elem.attr('href', scope.link.url);
}
}
}
上述代码中，我们首先定义了一个指令，并在scope中定义了一个名为link的属性。然后，在link函数中，我们使用了elem.attr()方法来添加href属性。在添加之前，我们先判断了link.url属性是否存在，如果存在，则将其添加为元素的href属性。
使用示例：
<a my-link="l" ng-bind="l.name"></a>
以上是一个使用示例，我们将my-link指令应用在一个标签上，并将l作为指令的属性传入。同时，我们使用ng-bind指令来动态绑定标签的内容。
另外，如果你只需要根据条件来添加href属性，你还可以使用ngHref指令来实现。ngHref指令会自动判断属性的值是否为undefined，如果是，则不会添加该属性。
<a ng-href="{{l.url}}" ng-bind="l.name"></a>
以上是使用ngHref指令的示例，我们将l.url作为ng-href指令的属性传入，ngHref指令会根据l.url的值来决定是否添加href属性。
通过以上两种方法，我们可以根据条件来动态地向元素中添加属性，实现了条件性添加属性的功能。
问题出现的原因是需要在Angular中根据条件向元素添加属性，包括整个属性。解决方法是根据不同的Angular版本采用不同的方式进行。
对于Angular 1.3及以上版本，可以使用ng-attr-指令实现：
<a ng-attr-href="{{href || undefined}}">Hello World</a>
对于版本低于1.3的Angular，则可以采用以下方式：
<a ng-if="href" ng-attr-href="{{href}}">Hello World</a>
<a ng-if="!href" >Hello World</a>
个人而言，我不喜欢第二种方法，因为它会导致代码重复。
以上内容摘自这个帖子。