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之前，你需要使用ngSanitize模塊的$sce.trustAsHtml方法來清理那個html 。

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

過濾

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

Answer 2

您可以使用

ngSanitize

有兩個步驟：

1. 包括angular-sanitize.min.js資源，即：
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. 在js文件（控制器或通常是app.js）中，包含ngSanitize，即：
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

$ refrence

Answer 3

要清理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>

Answer 4

不是將元素從控制器返回到HTML，而是使用$ element將控制器中的內容添加/附加到HTML。 使用angular.element找到你的DIV元素。

var tag =你的返回元素。

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