ngBind
概要
ngBind属性は、Angularに指定したHTML要素のテキスト内容を与えた式の値に置換するように指示し、
式の値が変更された際にテキスト内容を更新します。
一般的には、ngBindを直接使用せず、代わりに同様でより冗長では無い{{ 式 }}のような二重中括弧を使用します。
Angularがブラウザによってテンプレートがコンパイルされる直前の生の状態が{{ 式 }}として、瞬間的にそのまま表示されてしまう場合に、
代わりにngBindを使用するのが好ましいでしょう。
ngBindは要素の属性のため、ページの読み込み中にはユーザーに対して内も表示しません。
ngCloakを使用して、この問題を解決することもできます。
使用方法
<要素 ng-bind="{式}">
...
</要素>
<要素 class="ng-bind: {式};">
...
</要素>
引数
| 引数 | 説明 |
|---|---|
| ngBind |
型： 評価する式を指定します。 |
デモ
テキストフィールドに名前を入力してみてください。 即座に、挨拶文言の部分に入力した名前が反映されます。
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
名前: <input type="text" ng-model="name"><br>
こんにちは、<span ng-bind="name"></span>!
</div>
</body>
</html>
function Ctrl($scope) {
$scope.name = 'Tarou'; //初期値
}
it('should check ng-bind', function() {
expect(using('.doc-example-live').binding('name')).toBe('Whirled');
using('.doc-example-live').input('name').enter('world');
expect(using('.doc-example-live').binding('name')).toBe('world');
});
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
$scope.name = 'Tarou'; //初期値
}
</script>
</head>
<body>
<div ng-controller="Ctrl">
名前: <input type="text" ng-model="name"><br>
こんにちは、<span ng-bind="name"></span>!
</div>
</body>
</html>
© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.
このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。