如何在Angular中创建条件指令？

Question

我正在尝试在Angular中定义一个指令，它采用这样的DOM：

<example-directive href="{{ foo }}"><img src="{{ bar }}"></example-directive>

...并将其转换为......

<a href="http://www.example.com/FOO_VALUE"><img src="BAR_VALUE"></a>

...如果定义了href，则仅 。如果{{ foo }}为空，则应转换为

<img src="BAR_VALUE">

当{{ foo }}和{{ bar }}的值发生变化时，它还需要做出适当的回应。我无法弄清楚文档是否足以管理它。你是怎么做到的？

Answer 1

由于条件显示/隐藏不适合您，您需要的是同一指令中的变量模板：https://coderwall.com/p/mgtrkg

这样你就会有一个指令，你将在两个模板之间进行选择，具体取决于href是否存在。

Answer 2

更新：好的，我误解了这个问题。看看我是否正确： 我会有两个CSS课程：

.vis { display: normal; }
.hid { display : none; }

然后你的指令可能有这样的HTML

<span ng-show="foo != ''"><a href="{{ foo }}"><img src="{{ bar }}" /></a></span>
<span ng-show="foo == ''"><img src="{{ bar }}" /></span>

由于你的html的性质（删除只有一个包装元素使它变得棘手），这是一个hacky变通方法，但它应该工作。

Answer 3

我认为不需要在这里使用指令。只需使用ngIf：

<a ng-if="foo != ''" href="{{foo}}"><img src="{{ bar }}"></a>
<img ng-if="foo == ''" src="{{ bar }}">

ngIf是一个较新的指令。检查支持版本。