Angular过滤器返回HTML

Question

我想在angularjs 1.2中使用unsafe-html。虽然不带html的过滤器可以工作，但是带html的却不能。我的做法：

我在html头部添加了angular-sanitize：

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>

我的Angular模块：

var myApp = angular.module('myApp', ['ngSanitize'])
    .filter('convertState', function ($sce) {
        return function (state) {
            if (state == 1) {
                return $sce.trustAsHtml("<strong>" + state + "</strong> special state");
            }
            else {
                return $sce.trustAsHtml("<strong>"+state + "</strong> normal state");
            }
        }
    });

我的Html：

<td><span ng-bind-html="f.state | convertstate"></span></td>

编辑：将ng-bind-html-unsafe更新为ng-bind-html

- daniel

Answer 1

ng-bind-html-unsafe在Angular 1.2中已经被移除。由于您正确地对输入进行了净化，因此应该只使用ng-bind-html。

示例: http://plnkr.co/edit/0bHeXrarRP7IAciqAYgM?p=preview

- musically_ut

---

@zoidbergi，您能否指出这里的问题：http://plnkr.co/edit/0bHeXrarRP7IAciqAYgM?p=preview 它似乎可以工作。 - musically_ut

原来是大小写敏感的拼写错误！不过你的回答解决了我另一个问题。谢谢！ - daniel

当使用ngSanitize时，并不总是需要使用$sce.trustAsXXX()（实际上在这种情况下并不需要）。这就是净化的全部目的。 - gkalpak

Answer 2

你可以使用类似以下的内容：

app.directive('toHtml', function() {
  return {
    restrict: 'A',
    link: function (scope, el, attrs) {
      el.html(scope.$eval(attrs.toHtml));
    }
  };
});

用法如下：

<p to-html="name | convertState"></p>

http://plnkr.co/edit/Av2rmeXp7phkDdbYUbxF

- Mwayi