angularjs

angularjs 如何实现自定义html的显示

最近在使用angularjs做一个列表展示的功能，突然发现自定义行的内容里不能包含html标签。于是翻阅了一些资料和API找到了解决的办法。

  • 首先我们看下面一段代码 
1
2
3
4
5
6
<table data-ng-controller="ListController">
    <tr data-ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td>{{item.content}}</td>
    </tr>
</table>
  • 这里item对象的content属性里包含 html标签，例如 item.content=”我是内容”，如果出现这样的内容，不做任何处理的情况下页面会报错，导致内容无法显示，这是因为 angularjs的安全机制 引起的，angularjs渲染时不允许片段里包含html元素，如果需要加入自定义的html片段，需要调用它内部的服务$sce里的trustAsHtml方法来过滤既然angularjs 为我们提供了这个方法，于是我们稍微改写下前端的html，变成下面这样：
1
2
3
4
5
6
<table data-ng-controller="ListController">
    <tr data-ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td>{{getContentHtml(item.content)}}</td>
    </tr>
</table>
  • 接着我们在ListController里定义一个getContentHtml 方法来处理 这段文本内容。ListController 里需要引入$sce 服务
1
2
3
4
5
6
7
8
9
10
11
12
function ListController($sce,$scope)
{
    $scope.items=[
        {"title":"aaa","content":"<a href='www.peng8.net'>aaaa</a>"},
        {"title":"bbb","content":"<a href='www.peng8.net'>bbbb</a>"}
    ]
    $scope.getContentHtml=function(content)
    {
        //可以在此拼接其他的html
        return $sce.trustAsHtml(content);
    }
}
  • 以上是一种解决方案，那其实还有一种处理方案，也是通过$sce.trustAsHtml，但我们将其写在过滤器中，这样就可以避免多个controller里都要写相应的处理方法，但有些页面的业务逻辑比较复杂，还是得单独写在自己的controller里，依情况而定！为指定的模块 创建过滤器，例如我们为 app.controllers 创建了一个名叫 to_trusted 的过滤器
1
2
3
4
5
6
angular.module('app.controllers', [])
.filter('to_trusted', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        };
}]);
  • 前端页面的处理将会更加简洁，我们稍作修改变成如下：
1
2
3
4
5
6
<table data-ng-controller="ListController">
    <tr data-ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td ng-bind-html="item.content | to_trusted"></td>
    </tr>
</table>

这样，angularjs渲染的时候过滤器会自动去处理这段Html。