AngularJS：$ sce.trustAsHtml将代码作为文本返回

Question

所以基本上我有JSON数组返回数据，一个元素是实际的HTML代码，当我在ng-repeat中使用它时我有问题，这里是代码： JSON：

[
    {
    "id": "43",
    "name": "Name",
    "html": "<div style="text-align:justify"><div style="text-align:center"><strong>Stuff</strong><br />for stuff <br />and stuff</div></div>",
    "date": "2016-01-02"

    }
]

HTML：

<md-content ng-repeat="thing in stuff">
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="Basic">
            <md-content class="md-padding">
                <h4 ng-show="thing.id">ID:</h4>
                <div ng-show="thing.id">{{thing.id}}</div>
                <h4 ng-show="thing.name">Name:</h4>
                <div ng-show="thing.name">{{thing.name}}</div>
            </md-content>
        </md-tab>
        <md-tab label="Advanced">
            <md-content class="md-padding">
                <div ng-bind-html="trustHtml(thing.html)"></div>
            </md-content>
        </md-tab>
    </md-tabs>
</md-content>

在控制器中我有$scope.trustHtml = $sce.trustAsHtml;来解码来自JSON的html，它应该渲染它。但它将解码HTML作为文本输出，如：

Acutal render

我尝试添加为过滤器：

angular.module('myApp')
    .filter('asHtml', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

我尝试将其添加为指令：

myApp.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                ele.html(html);
                $compile(ele.contents())(scope);
            });
        }
    };
})

但每次我只获得html作为文本，仅此而已......

Answer 1

你的$scope.trustHtml功能应该是这样的。

angular.module("test",['ngSanitize'])
.controller("testCtrl",['$scope','$sce',function($scope,$sce){

  $scope.trustHtml  =   function(html){
                        return $sce.trustAsHtml(html);;
                      }
}

请在此处查看more