angularjs - 如何在 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

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

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

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

Answer 3

更新：好的，我误解了这个问题。看看我是否做对了：我会有两个 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 解决方法，但它应该可以工作。