angularjs - ng-bind-html中的AngularJS数据绑定？

Question

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

即，我有一个

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

我的角度模板看起来像，

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

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

所以，我想将数据绑定到{{caption}}.

提前致谢..

Answer 1

您应该使用 $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>

Answer 2

您需要编译您的 HTML 片段，但建议在指令中执行此操作。

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

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

Answer 3

关于什么？

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