js STUDIO

ngBindTemplate

概要

ngBindTemplateディレクティブでは、ngBindTemplate属性内に 要素のテキスト内容が補完されて置き換えられるべきテンプレート内容を指定します。 ngBindとは異なり、ngBindTemplateは複数の{{ }}式を含めることが可能です。 このディレクティブは、SPAN要素を含むことが出来ないHTML要素(titleやoptionのような)から必要とされます。

使用方法 

<要素 ng-bind-template="{string}">
   ...
</要素>

引数

引数 説明
ngBindTemplate

型：string

{{ 式 }}が評価されるテンプレートを指定します。

サンプル

テキストフィールドにテキストを入力し、挨拶文がどうなるか確認してみてください。 

<!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">
     Salutation: <input type="text" ng-model="salutation"><br>
     Name: <input type="text" ng-model="name"><br>
     <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
    </div>
  </body>
</html>

function Ctrl($scope) {
  $scope.salutation = 'Hello';
  $scope.name = 'World';
}

it('should check ng-bind', function() {
  expect(using('.doc-example-live').binding('salutation')).
    toBe('Hello');
  expect(using('.doc-example-live').binding('name')).
    toBe('World');
  using('.doc-example-live').input('salutation').enter('Greetings');
  using('.doc-example-live').input('name').enter('user');
  expect(using('.doc-example-live').binding('salutation')).
    toBe('Greetings');
  expect(using('.doc-example-live').binding('name')).
    toBe('user');
});

<!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.salutation = 'Hello';
  $scope.name = 'World';
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
     Salutation: <input type="text" ng-model="salutation"><br>
     Name: <input type="text" ng-model="name"><br>
     <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
    </div>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。