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

我试图在Angular中定义一个指令，它采用如下DOM：

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

---

当

{{foo}

和

{{bar}}

的值更改时，它还需要做出适当的响应。我无法充分理解文档来管理它。你是怎么做到的？

更新：好的，我误解了这个问题。看看我是否做对了： 我有两个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的性质，这是一个有点粗糙的解决方法（仅删除包装元素会使其变得棘手），但它应该可以工作。

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

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

---

ngIf

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

由于条件显示/隐藏不适用于您，您需要的是同一指令中的变量模板：

---

这样，您将有一个指令，并根据是否存在实际上没有解决问题的

href

在两个模板之间进行选择。在这两种情况下，

img

href都是

BAR\u值。只有在未定义
{{foo}
时，包装
标记才不会出现。@ChrisB。对不起，我误解了这个问题，但我想我现在明白了。是的，我可以用ng hide和ng show。但在我的实际例子中，
标记的内容要复杂得多，我不想在文档中定义它两次。@ChrisB。除此之外，我只能考虑在不包装
的情况下声明指令的html，并在链接时动态创建它，或者甚至有两个指令，父指令应用上述逻辑，因此如果
foo==''
它只包装/传递到内部指令。
href=“{{foo}}”
应该是href=“foo”。为什么？我实际上希望值类似于“{foo}”。这是一个坏主意吗？如果不编写可能非常复杂的编译函数，我认为您至少需要一个公共包装器元素，如
span
或类似的元素（用于最终输出）.我的代码是一个简化的例子。链接的实际内容更复杂，我真的不想重复两次。
<span ng-show="foo != ''"><a href="{{ foo }}"><img src="{{ bar }}" /></a></span>
<span ng-show="foo == ''"><img src="{{ bar }}" /></span>

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