AngularJS数据绑定在ng-bind-html中?

时间:2013-12-27 06:41:09

标签: angularjs ng-bind-html

是否可以将范围变量的数据绑定到即将绑定为ng-bind-html的html?

即,我有一个

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

和我的角度模板看起来像,

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

范围变量caption的值在角度控制器中设置。

所以,我想在{{caption}}中绑定数据。

提前致谢..

3 个答案:

答案 0 :(得分:21)

你应该使用$ interpolate而不是$ compile 像这样写控制器:

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>

答案 1 :(得分:7)

您需要编译HTML代码段,但建议在指令中执行此操作。

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

答案 2 :(得分:-3)

怎么样?

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