ng-bind-html中的angular命令

Question

我尝试使用$interpolate和ng-bind-html通过this answer将作用域变量的数据绑定到html字符串。现在，当我的作用域变量的值更新ng-bind-html结果时，它并没有更新。

我不想每次我的作用域更新时都调用$interpolate。

这是我的控制器代码：

$scope.TitleFlag= true;
$scope.HtmlContent = "<div>{{TitleFlag}}</div>";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
$scope.TitleFlagToggle = function(){
    $scope.TitleFlag= !$scope.TitleFlag;
  };

这是我的视图代码：

<div>{{TitleFlag}}</div> <!-- This is update correctly -->
<div ng-bind-html="trustedHtml"></div> <!-- This is not update -->
<button class="button" ng-click="TitleFlagToggle()"></button>

Answer 1

当TitleFlag发生变化时，我们需要对其进行插值。所以把$scope.trustedHtml也放在点击函数里。

$scope.TitleFlag= true;
$scope.HtmlContent = "<div>{{TitleFlag}}</div>";
$scope.trustedHtml = $interpolate($scope.HtmlContent)(  $scope);
$scope.TitleFlagToggle = function(){
  $scope.TitleFlag= !$scope.TitleFlag;
  $scope.trustedHtml = $interpolate($scope.HtmlContent)(  $scope);
};

http://plnkr.co/edit/rRjHOY2xSiAZ8EtzviqK?p=preview