定番
新着
履歴

AngularJS bindについて

AngularJS bindについて

AngularJSのbindとは以下のようにhtmlのエレメントの値を書き込むことをさします。

<p>{{myData.text}}</p>

同様の表現で以下の書き方も可能です。

<p ng-bind="myData.text"></p>

例えばデータを以下のようにセットします。

$scope.myData = {
    text:"こんにちは",
    html:'<span style="color:red;">こんにちは</span>'
}'

そして

<p>{{myData.text}}</p>
<p>{{myData.html}}</p>

と設定すると、それぞれこうなります。

こんにちは
<span style="color:red;">こんにちは</span>

初期のAngularJSでは ng-bind-html-unsafeというディレクティブが用意されており、HTMLをそのまま表示することができましたが、1.5.Xのバージョンでは、ng-bind-html が用意され、HTMLの除去(サニタイズ)を行う仕様となったようです。unsafeとつけるくらいなので、そもそも非推奨だったのでしょうか。ともかくHTMLはbindしない表現が望ましいようです。

<p ng-bind-html="myData.html"></p>

こんにちは

すべての例は以下に実装しました。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
// myAppモジュールを作成
var app = angular.module('myApp', ['ngSanitize']);
// myAppモジュールにmyControllerコントローラーを登録
app.controller('myController', function($scope) {
	$scope.myData = {
		text:"こんにちは",
		html:'<span style="color:red;">こんにちは</span>'
	}
});
<div ng-app="myApp">
<div ng-controller="myController">
<p>{{myData.text}}</p>
<p>{{myData.html}}</p>
<p ng-bind="myData.text"></p>
<p ng-bind="myData.html"></p>
<p ng-bind-html="myData.html"></p>
</div>
</div>

{{myData.text}}

{{myData.html}}

2016-10-28 01:23:52
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top