HTML Bind

HTML 文を div の TEXT 表示に Bind します。
HTML 文は Controler から設定します。

次のリンクをクリックすると "ngp_bind.html" が呼び出されます。
危険なリンクをクリックすると alert で「こんにちは！」が表示されます。
HTML Bind のプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_bindhtml.html" です。
    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.min.js"></script>
<title>AngularJS TIPS</title>
</head>

<body>
<form ng-controller="myController">
  <div ng-bind-html="msg"></div>
</form>

<script>
  var app = angular.module('myApp', [ 'ngSanitize' ]);
  app.controller('myController', ['$scope', '$sce',
    function($scope, $sce)
    { var msg = '<script>console.log("危険！");<'
               + '/script><p>こんにちは、世界</p>'
               + '<a href="#" onclick="alert(\'こんにちは！\')">危険なリンク</a>'
               + '<button>おっす</button>'
               + '<font color="Red">こんにちは、世界</font>';
      $scope.msg = $sce.trustAsHtml(msg);
    }]);
</script>

</body>
</html>
  2. html を AngularJS の myApp モジュールに関連付けます。
    <html ng-app="myApp">
  3. head 内で angular.min.js に加えて angular-sanitize.min.js を組み込んで下さい。
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.min.js"></script>
  4. form で ng-controller を定義して div の ng-bind-html で "msg" を参照します。
    <form ng-controller="myController">
  <div ng-bind-html="msg"></div>
</form>
  5. controller で msg に HTML テキストを設定します。
    1. ng-bind-html 属性を利用する場合には、ngSanitize モジュールをインポートします。
        var app = angular.module('myApp', [ 'ngSanitize' ]);
    2. var msg で HTML テキストを定義します。
      console.log は Firefox のデバッグ機能で IE では動きません。
          var msg = '<script>console.log("危険！");<'
               + '/script><p>こんにちは、世界</p>'
               + '<a href="#" onclick="alert(\'こんにちは！\')">危険なリンク</a>'
               + '<button>おっす</button>'
               + '<font color="Red">こんにちは、世界</font>';
    3. AngularJS では HTML を通じて危険にさらされることが無いようにガードされています。
      $sce.trustAsHtml(msg); は HTML 文が信頼済みであることのマーキングです。
      使用するときはセキュリティホールにならないように開発者自身が保証しなければなりません。
        $scope.msg  = $sce.trustAsHtml(msg);

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)