AngularJs从Controller返回HTML

Question

我尝试将一些HTML代码从我的AngularJs控制器返回到html数据.

这是我的html的路径:

<div align="right">
   {{chooseHtmlElement()}}">
</div>

这是我的AngularJs控制器的路径:

   $scope.chooseHtmlElement= function () {
        var sum = $scope.chiQuadSum();
        if (isNaN(sum)) {
            return "";
        }
        if (sum > 17.00) {
            return "<i class=\"fa fa-minus-circle\" style=\"color:red;\"></i>";
        } else if (sum < 14.00) {
            return "<i class=\"fa fa-check-circle\" style=\"color:green;\"></i>";
        } else {
            return "<i class=\"fa fa-circle\" style=\"color:orange;\"></i>";
        }
    }

问题是当我返回这些字符串时,该元素不会显示为html元素,而是显示为可以阅读的文本.是否有可能将这些字符串作为html元素返回？

Answer 1

在角度js中绑定视图上的html时,您需要使用ng-bind-html指令.但在绑定html之前,需要html使用模块$sce.trustAsHtml方法对其进行清理ngSanitize.

<div align="right" ng-bind-html="chooseHtmlElement() | trustedhtml"></div>

过滤

app.filter('trustedhtml', 
   function($sce) { 
      return $sce.trustAsHtml; 
   }
);