Dynamically display comments with links inside using Angular JS

Question

i have developed a comment system using Angular JS. Unfortunately if a user inserts a link in his comment, the link is not clickable in the displayed comment. How can i achieve this ?

Here is my HTML code:

<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>

The comment body is inside the

@{{ comment.comment.content }}

Here is the angular controller:

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;
                });

        });
};

});

You need to detect whether comment contains link or not. If yes add conditions accordingly. To detect you can check [here](http://stackoverflow.com/questions/1500260/detect-urls-in-text-with-javascript) — Priyanka, Nov 22 '16 at 10:33
the link in the comment is saved in format. i just need to display it as an html tag and not as text — Vince Carter, Nov 22 '16 at 11:22

score 0 · Answer 1 · 2016-11-22T11:32:22.123

0

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

Should do the trick.

edited Nov 22 '16 at 11:32

answered Nov 22 '16 at 10:34

unfortunately this does not display me anything :( i have placed a closing " in order to display the html code properly – Vince Carter Nov 22 '16 at 11:22
unfortunately no :( it does not even display the text – Vince Carter Nov 22 '16 at 11:45
Oh yeah I forgot, you need to use `$sanitize` too – Nov 22 '16 at 11:56
i am not familiar with angular js. How should i use $sanitize? – Vince Carter Nov 22 '16 at 12:21
Please see the documentation : https://docs.angularjs.org/api/ngSanitize/service/$sanitize – Nov 22 '16 at 12:28
i have added the ngSanitize module to angular js, but do i need also to add something more, cause it still does not show me anythign :( – Vince Carter Nov 22 '16 at 13:22
Did you follow the documentation ? It's said that you need to use `$sce.trustAsHtml`, did you do that ? – Nov 22 '16 at 13:24
I dont understand where to place $sce.trustAsHtml into my code. As i see there is used deliberatelyTrustDangerousSnippet function called in the initialization. But i need to display the dynamic loaded comments. – Vince Carter Nov 22 '16 at 16:16
You need to place it in your controller. For instance, do `
` and in your controller, `$scope.sanitizedString = $sce.trustAsHtml($scope.comment.comment.content);`. Don't forget to inject `$sce` – Nov 23 '16 at 08:10
i have added my changed controller to the post, because i am not sure i have inserted right the $sce ? – Vince Carter Nov 23 '16 at 10:20
It seems like you used the right one. I made aplunkr too to show you : **[You can find it there](https://plnkr.co/edit/pj9r0ehAm65FrwVER2tc?p=preview)** – Nov 23 '16 at 10:39
but it still does not show me anything. Except this time there is an error like that: Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=commentApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.5%2F%24injector%2Fmodulerr%3Fp0%3DngSanitize%26p1 .... – Vince Carter Nov 23 '16 at 23:15
Well then, it's an injection error, I guess you tried to import `ngSanitize` while it's not required (for `$sce`). Really, take a look at my plunker, it's very simple and understandable. – Nov 24 '16 at 08:25
yeah it is understandable, but i have tried to change it and to insert a link inside it and it doesnt display it. Can u please change the plunker example so it shows the name Max with a link ? – Vince Carter Nov 24 '16 at 09:26
Done, see the plunkr ! – Nov 24 '16 at 10:22
Can i ask u to check that page and tell me what i am doing wrong: http://beta.bet-portal.net/bonus/betfair-poker_595.html – Vince Carter Nov 26 '16 at 10:45
All I see is a PHP error : `FatalErrorException in BonusController.php, line 85: Call to a member function visit() on null` – Nov 28 '16 at 08:36
Strange. I don't see that error. Please check it again, if you still get that error. Try this page: http://beta.bet-portal.net/help/3/accumulator.html – Vince Carter Nov 28 '16 at 08:51
Now I have the menu andsidenav, but the main content says `Page not found` – Nov 28 '16 at 08:57
Strange. Can u choose one article from the table on that page: http://beta.bet-portal.net/help.html ? – Vince Carter Nov 29 '16 at 16:03
Ooooooh I get it, I again got a page not found. I guess you're loading ads, or sponsored content, but I have a proxy at work that prevents loading. – Nov 30 '16 at 08:17
for the test purposes i have hidden all banners, but i dont know if you proxy detects that my domain is showing such content ? – Vince Carter Nov 30 '16 at 15:56

Dynamically display comments with links inside using Angular JS

1 Answers1