AngularJS data bind in ng-bind-html?

Question

Is it possible to bind data of scope variable to a html that is about to bind as ng-bind-html?

ie, I have a

html =\"
{{caption}}

        
                      

              相关标签:
       
      

Answer 1

What about?

html = '<div ng-bind="caption"></div>';

Answer 2

You should use $interpolate not $compile.
Write controller like this:

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

Then write HTML like this:

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

Answer 3

You need to compile your HTML snippet, but it is recommended to do that inside the directive.

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

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