web-dev-qa-db-ja.com

AngularJSデータはng-bind-htmlでバインドしますか？

スコープ変数のデータをng-bind-htmlとしてバインドしようとしているhtmlにバインドすることは可能ですか？

つまり、私は

html ="<div>{{caption}}</div>";

そして私のangularテンプレートは次のようになります、

<div ng-bind-html="html"></div>

スコープ変数captionの値はangularコントローラーに設定されます。

そこで、{{caption}}でデータをバインドしたいと思います。

前もって感謝します..

angularjsng-bind-html
18
Saidh

$ compileではなく$ interpolateを使用する必要があります。
コントローラーを次のように記述します。

angular.module('app', ['ngSanitize'])
  .controller('MyCtrl', ['$scope', '$interpolate', function($scope, $interpolate){
   $scope.caption = 'My Caption';
   $scope.html = $interpolate('<div>{{caption}}</div>')($scope);
});

次に、次のようにHTMLを記述します。

<div ng-controller="MyCtrl">
    <div ng-bind-html="html"></div>
</div>
21
Jennie Ji

HTMLスニペットをコンパイルする必要がありますが、ディレクティブ内でコンパイルすることをお勧めします。

app.controller('MyCtrl', function($compile){
  $scope.caption = 'My Caption';
  $scope.html = $compile('<div>{{caption}}</div>')($scope);
});

<div ng-bind-html="html"></div>
7
Stewie