AngularJs 从控制器返回 HTML答案

【问题标题】：AngularJs Return HTML from ControllerAngularJs 从控制器返回 HTML
【发布时间】：2025-08-25 06:30:03
【问题描述】：

我尝试将一些 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 元素返回？

【问题讨论】：

标签： javascript html angularjs data-binding ng-bind-html

【解决方案1】：

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

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

过滤器

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

【讨论】：

【解决方案2】：

你可以使用

ngSanitize

有两个步骤：

包括 angular-sanitize.min.js 资源，即：
<script src="lib/angular/angular-sanitize.min.js"></script>
在 js 文件（控制器或通常是 app.js）中，包含 ngSanitize，即：
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

$refrence

【讨论】：

【解决方案3】：

不是将元素从控制器返回到 HTML，而是使用 $element 将内容从控制器添加/附加到 HTML。使用 angular.element 查找您的 DIV 元素。

var tag = 你的返回元素。

var ele = $compile(tag)($scope);
angular.element('div').append(ele);

【讨论】：

【解决方案4】：

用于清理 html 字符串 , 在代码中包含以下模块和js，

<script src="//code.angularjs.org/1.4.7/angular-sanitize.js"></script>

angular.module('app', [
  'ngSanitize'
]);

绑定作用域，

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

【讨论】：

它是一个函数调用.. ng-bind-html="chooseHtmlElement()" 应该是它。