Question

我有简单的ng-repeat：

<section id="content" class="container" ng-app="myApp" ng-controller="postsController">
    <div class="row">            

        <div class="col s12 xl6" ng-repeat="post in posts | filter:searchText" on-finish-render="done">
            <div class="card">
                <div class="card-image">
                  <img ng-src="{{post.Thumbnail}}" alt="image">
                  <span class="card-title">{{post.Title}}</span>
                </div>
                <div class="card-content">
                    <p>{{post.Excerpt}}</p>
                </div>
            </div>
        </div>

    </div>
</section>

角度代码：

var myApp = angular.module('myApp',[]);

myApp.controller('postsController',['$scope', '$http', function ($scope, $http) {
    $http.get("api/db.php").
    success(function(response) {
        console.log(response); //For testing
        $scope.posts = response;
        console.log("Connected to MySQL server.");
        $scope.$on('done', function(ngRepeatFinishedEvent) {
            console.log("All content has been loaded :)");
            $('.modal-trigger').leanModal();
        });
    });
}]);

myApp.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

现在问题在于 {{post.Excerpt}} ，它已保存在我的数据库中的HTML中。它有效，但我已经在文本中得到它（如在a中）。所以我的问题是如何用html显示它？

我读了一些关于ng-bind-html-unsafe的内容，但许多人说这不起作用。有什么建议吗？

Grettings，W

Answer 1

您可以为其制作过滤器。

过滤器：

myApp.filter('ashtml', function($sce) { return $sce.trustAsHtml; });

视图

<div ng-bind-html="post.Excerpt | ashtml"></div>

工作演示：

     angular.module('myapp', [])
     .controller('HelloWorldCtrl', function($scope){
          $scope.helloMessage = "Hello A.B";
        $scope.post = {};
          $scope.post.Excerpt = '<p>hello html</p>';
          })
     .filter('ashtml', function($sce) { return $sce.trustAsHtml; })
     ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <!DOCTYPE html>
        <html ng-app="myapp">
        <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        </head>
        <body ng-controller="HelloWorldCtrl">
        <h1 >{{helloMessage}}</h1>
        <div ng-bind-html="post.Excerpt | ashtml"></div>
      
      
      
   
        </body>
        </html>

AngularJS ng-repeat显示html

1 个答案: