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..
You should use $interpolate not $compile. Write the 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 the HTML like this:
<div ng-controller="MyCtrl">
<div ng-bind-html="html"></div>
</div>
$interpolate instead of $compile. $interpolate returns a string, which is what $scope.html needs to be in this case; $compile returns a DOM element. This answer gives a great explanation of $compile vs. $interpolate vs. $parse.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>
What about?
html = '<div ng-bind="caption"></div>';
