AngularJS data bind in ng-bind-html?

angularjs ng-bind-html
Saidh picture Saidh · Dec 27, 2013 · Viewed 17k times · Source

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 ="<div>{{caption}}</div>";

and my angular template look like,

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

the value of scope variable caption is set in angular controller.

So, I want to bind data in {{caption}}.

Thanks in advance..

Answer

Jennie Ji picture Jennie Ji · Aug 21, 2014

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>

Related questions

AngularJS and AngularUI: mask or format a phone number when binding

I am using AngularUI to format or "masking" a phone number input, and it works fine with a ng-model: <input ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/> Question: But now how can I apply the same …

Read More
Angular sanitize / ng-bind-html not working?

I've got a repeater set up and can get data to display as long as there is no html within it. I've included angular-sanitize.js and have tried using ng-bind-html But nothing is displayed within the span, only within the …

Read More
insert an iframe into page dynamically in AngularJS

I am trying to dynamically insert an iframe into a page with Angular 1.2. Here is the code: html: <div id="player_wrapper" ng-cloak> <div ng-bind-html="player"></div> </div> js: $http({method: 'GET', …

Read More