AngularJS 1.3：动态渲染含AngularJS代码的HTML并自动更新视图咨询

在AngularJS 1.3里处理这种带Angular指令的动态HTML渲染确实有点绕，不过咱们一步步来拆解解决：

1. 先保证数据的响应式更新 #

首先得确保数据库的值是绑定到Angular作用域（$scope）变量上的。当用户修改数据库值后，一定要把新值同步到$scope的对应变量里——这样Angular的脏值检测机制才能自动触发页面更新。

举个控制器逻辑的例子：

app.controller('MyController', function($scope, $sce, MyDataService) {
  // 从数据库初始化值
  MyDataService.getValue().then(function(data) {
    $scope.isValueTrue = data.value;
    updateDynamicHtml();
  });

  // 切换值的函数，修改数据库后同步到scope
  $scope.myToggleFunction = function(param) {
    var newValue = param === 'paramValueFalse' ? false : true;
    MyDataService.updateValue(newValue).then(function() {
      $scope.isValueTrue = newValue;
      updateDynamicHtml();
    });
  };

  // 生成动态HTML片段并标记为可信（避免Angular安全拦截）
  function updateDynamicHtml() {
    if ($scope.isValueTrue) {
      $scope.dynamicContent = $sce.trustAsHtml(
        'Your value is True. To set it to False, <a ng-click="myToggleFunction(\'paramValueFalse\')">click here</a>'
      );
    } else {
      $scope.dynamicContent = $sce.trustAsHtml(
        'Your value is False. To set it to True, <a ng-click="myToggleFunction(\'paramValueTrue\')">click here</a>'
      );
    }
  }
});

这里用$sce.trustAsHtml是因为AngularJS 1.3有安全机制，会默认过滤未标记为可信的HTML，防止XSS风险。

2. 写个自定义指令编译动态HTML #

普通的ng-bind-html只能渲染静态HTML，没法解析里面的ng-click这类Angular指令，所以咱们得自己写个指令来做编译工作：

app.directive('compileHtml', function($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function(scope, element, attrs) {
      // 监听绑定的动态内容变化
      scope.$watch(attrs.compileHtml, function(newHtml) {
        if (newHtml) {
          // 清空旧内容，编译新HTML并插入元素
          element.html(newHtml);
          $compile(element.contents())(scope);
        }
      });
    }
  };
});

3. 在视图里用自定义指令 #

最后把模板里的ng-bind-html换成咱们的自定义指令就行：

<div ng-controller="MyController">
  <div compile-html="dynamicContent"></div>
</div>

几个关键注意点 #

• $sce不能省：必须用$sce.trustAsHtml标记你的动态HTML，不然Angular会直接拒绝渲染它，这是1.3版本的强制安全要求。
• 依赖$scope变量更新：只要你修改的是$scope上的变量，Angular会自动检测到变化，触发指令里的$watch回调，重新编译渲染HTML。
• 指令的$watch监听：正是靠这个监听，才能保证每次数据库值更新后，新的HTML片段都会被正确编译，里面的ng-click也能正常触发函数。

这样就能实现你要的效果：数据库值变化后页面自动更新，动态HTML里的Angular指令也能正常工作啦。

内容的提问来源于stack exchange，提问作者Heather