Question

我使用Angular JS开发了一个评论系统。不幸的是，如果用户在其评论中插入链接，则该链接在显示的评论中不可点击。我怎样才能做到这一点？

这是我的HTML代码：

<section class="comment-list" ng-hide="loading" ng-repeat="comment in comments">
<article class="row">
    <div class="col-md-2 col-sm-2 hidden-xs">
        <figure class="thumbnail">
            <img class="img-responsive" src="@{{ comment.user.avatar }}" />
        </figure>
    </div>
    <div class="col-md-10 col-sm-10" style="padding-bottom: 10px;">
        <div class="comment_panel panel-default arrow left">
            <div class="panel-body">
                <header class="text-left">
                <div class="comment-user"><i class="fa fa-user"></i> @{{ comment.user.name }}</div>
                <time class="comment-date"><i class="fa fa-clock-o"></i> @{{ comment.date }}</time>
                </header>
                <div class="comment-post">
                    <p ng-bind-html="sanitizedComment"></p>
                </div>
            </div>
        </div>
    </div>
</article>

评论正文在

@ {{comment.comment.content}}

内

这是角度控制器：

angular.module('mainCtrl', [])

// inject the Comment service into our controller
.controller('mainController', function($scope, $http, $sce, Comment) {
// object to hold all the data for the new comment form
$scope.commentData = {};

$scope.sanitizedComment = $sce.trustAsHtml($scope.comment.comment.content);
// loading variable to show the spinning loading icon
$scope.loading = true;

// get all the comments first and bind it to the $scope.comments object
// use the function we created in our service
// GET ALL COMMENTS ==============
Comment.get()
    .success(function(data) {
        $scope.comments = data;
        $scope.loading = false;
    });

// function to handle submitting the form
// SAVE A COMMENT ================
$scope.submitComment = function() {
    $scope.loading = true;

    // save the comment. pass in comment data from the form
    // use the function we created in our service
    Comment.save($scope.commentData)
        .success(function(data) {

            // if successful, we'll need to refresh the comment list
            Comment.get()
                .success(function(getData) {
                    $scope.comments = getData;
                    $scope.loading = false;
                });

        })
        .error(function(data) {
            console.log(data);
        });
};

// function to handle deleting a comment
// DELETE A COMMENT ====================================================
$scope.deleteComment = function(id) {
    $scope.loading = true; 

    // use the function we created in our service
    Comment.destroy(id)
        .success(function(data) {

            // if successful, we'll need to refresh the comment list
            Comment.get()
                .success(function(getData) {
                    $scope.comments = getData;
                    $scope.loading = false;
                });

        });
};

}）;

Answer 1

<div class="comment-post>
    <p ng-bind-html="comment.comment.content"></p>
</div>

应该做的伎俩。

使用Angular JS动态显示带有链接的注释

1 个答案: