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

Answer 2

<强>解决方法1： -

在这种情况下，angularjs不会编译。 Angulajs不了解添加新指令并执行它。要运行大小写，你需要编译你的HTML.So Angularjs会理解它，它会给你预期的输出。

要实现这一目标，您需要创建指令，该指令将编译HTML代码。

<强>溶液2： -

您可以直接使用$sce.trustAsHtml('<span class="getIconColor('+ myColor +')">');

代替此操作

$ sce.trustAsHtml无法按预期工作

2 个答案: