読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

AngularJS1.x その0016 ng-bindとng-bind-htmlを使ってみる

参考にさせて頂いたページ

使用例について

AngularJS: モデルをビューにバインドするには?(ng-bind/ng-cloak) - Build Insider

AngularJS: ビューにHTML文書をバインドするには?(ng-bind-html) - Build Insider

angular-sanitizeのインストールについて

angular-sanitize

ng-bind-htmlを使用する場合の準備

npmなどで、angular-sanitize.min.jsをダウンロードして読み込む。

ダウンロードは以下のようなコマンド。

npm install --save-dev angular-sanitize

モジュールを作成するときに、以下のようにngSanitizeを読み込む。

// myAppモジュールを作成して、依存モジュールを読み込み
var app = angular.module('myApp', ['ngSanitize']);

プロパティを展開する記述

例として以下の通り。このとき波括弧はいらない。

  <p ng-bind-html="articles.length">
  </p>
  <div ng-bind="articles.length">
  </div>

静的な文字列を含めるときの記述

例として以下の通り。シングルクォーテーションで文字列を囲う。

  <p ng-bind-html=" '記事の数は' + articles.length ">
  </p>
  <div ng-bind=" '記事の数は' + articles.length ">
  </div>