エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【AngularJS】{{}}でバインドした後の値をdataやsrcに使いたい【705日目】

バインド後の値を使いたい

<div>
    <img src="{{url}}">
</div>
<div>
    <object data="{{url}}">
</div>

上のコードの様に、バインドした値をURLなどパス指定に使いたい。

しかし、バインド前にimg属性がファイルを探しに行ってしまい、目的の値を取得することが出来ないことがある。

なので、データをバインドしてからの値を使うときには一工夫が必要。

ng-src や ng-attr-data

<div>
    <img src="" ng-src="{{url}}">
</div>
<div>
    <object data="" ng-attr-data="{{url}}">
</div>

この様に変えると良い。
すると、バインド後の値が反映される。上の場合、 ng-srcsrcに。ng-attr-datadataに反映される。

ng-srcは公式で作成されているもの。 ng-attr-***は、任意の属性で扱える。

ng-attr-original_statusとかなら、 original_statusにバインド後の値が反映される。