angularjs - Angular で条件付きディレクティブを作成するにはどうすればよいですか?

Question

次のようなDOMを取るディレクティブをAngularで定義しようとしています:

<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 }}ます。それを管理するのに十分なドキュメントを理解できません。どのようにしますか？

score 0 · Accepted Answer

ここでディレクティブを使用する必要はないと思います。使用するだけngIfです：

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

ngIf新しいディレクティブです。サポートされているバージョンを確認してください。

score 0 · Accepted 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 の性質上、ちょっとハックな回避策ですが (ラッピング要素だけを削除すると扱いにくくなります)、うまくいくはずです。

3 に答える 3