javascript - $sce.trustAsHtml 无法按预期工作

Question

这是我正在尝试做的事情

$sce.trustAsHtml('<span ng-class="getIconColor('+ myColor +')">')

在我的 HTML 代码中只打印

<span ng-class="red">

但我期待ng-class $sce之前要评估的属性返回它。我的代码有点像这样工作

<span ng-class="red" class="red">

如何做到这一点？

Answer 1

这是一个编译问题，当您渲染需要编译的动态内容时，$sce 服务无法开箱即用。 您可以通过创建自己的强制编译指令来解决此问题。

app.directive('dynamic', function ($compile) {
      return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
          scope.$watch(attrs.dynamic, function(html) {
            ele.html(html);
            $compile(ele.contents())(scope);
          });
        }
      };
    })

    $scope.trustedContent = function(){
      return $sce.trustAsHtml('<span ng-class="getIconColor('+ myColor +')">');
    }

<div ng-bind-html="trustedContent()" dynamic> </div>

Rendering directives within $sce.trustAsHtml

http://plnkr.co/edit/3CewDscih8diAo4mMSwJ?p=preview