CODEWITHSUNDEEP
javascriptangularjsnode.jsexpresspug
Harshit Laddha
Harshit Laddha

Reputation: 65

Loading Dynamic variable containing html from angularjs to jade template

I have a controller which by using $http fetches some data and then stores it in array $scope.feeds. Now my jade syntax is - 

div(ng-repeat="post in feeds")
        div.box.box-success
            div.box-header
                h3.box-title
                    i.fa.fa-user
                    | {{post.firstName}} {{post.lastName}}
                div.pull-right
                    i.fa.fa-clock-o
                    //| {{(new Date(post.date)).toTimeString().split(":")[0]}} {{(new Date(post.date)).toTimeString().split(":")[1]}}, {{(new Date(post.date)).toDateString()}}
            div.box-body
                p.
                   {{post.message}}

Now, On google I found that due to security concerns jade doesnt allow direct html here so it was suggested to use something like - 

p!= {{post.message}}

or 

p.
   #{post.message}

but i am getting jade error saying that post.message is undefined. P.S. I am able to see string like - ass<b>sada</b> by displaying {{post.message}} so post.message is not undefined. So, can anyone tell me how to add html content to this paragraph tag. Please note that a sample of my controller code is like this - 

angular.module('student').controller('StudentDashBoardController', function($rootScope, $scope,$http,$location,mvNotifier) {
    $scope.feeds = [];
    var obj = { "message" : "asdsd&lt;b&gt;asd&lt;/b&gt;","firstName":"test","lastName":"test" ,"username" : "test@test.com", "dislikes" : [ ], "likes" : [ ], "tags" : [ ], "comments" : [ ], "views" : 1, "date" : "2014-12-18T19:08:44Z", "__v" : 0 };
    $scope.feeds.push(obj);
});

I also tried adding this in controller code - 

$scope.decode = function(textData){
        var textarea=document.createElement("textarea");
        textarea.innerHTML = textData;
        return textarea.textContent;
    };
$scope.to_trusted = function(html_code) {
        return $sce.trustAsHtml(html_code);
    }

and the jade part is updated to - 

p(ng-bind-html="{{to_trusted(decode(post.message))}}")

which shows no error in chrome debugger and shows this in inspect element - 

<p ng-bind-html="asdsd<b>asd</b>"></p>

any suggestions where i might be going wrong??

Upvotes: 1

Views: 2314

Answers (1)

Vadim
Vadim

Reputation: 17965

You're confused. For one, jade templates are compiled on the server and angular templates are compiled on the client. So of course post.message is not defined on the server, because you're defining it in your client side code.

Secondly you might be referring to angular not allowing html, rather than jade. This is true for most html, but it does allow you to bind a limited amount of tags with out 'trusting' the html. You just need to use ngBindHtml.

Your template should look like:

p(ng-bind-html="post.message")

And your obj.message should contain < and > tags rather than escaped sequences.

You can read about $sce and how to bind angular to html here https://docs.angularjs.org/api/ng/service/$sce

Upvotes: 2

Related Questions