Trying to output html with angular js

Question

Im trying to output html with angular js. I know the html is going to be ok. This is what im trying now:

<div class="items-list" id="items-container">
        <div ng-repeat="data in ItemsData track by $index" ng-bind-html='ItemsData'>
            <-data->
        </div>
    </div>

And this is what i pretty much am doing with the data

$.ajax({
                        method: "POST",
                        url: "{{URL::route('items')}}",
                        data: filteringData,
                        dataType: 'json'
                    }
            ).done(function (response) {
                        $scope.ItemsData = $sce.trustAsHtml(response['items']);
                        $scope.ItemsPage += 1;
                        $scope.ItemsLastPage = response['lastPage'];
                        $scope.ItemsLoaderBusy = false;
                    });

But this is not working. Im trying to do this for a long time.

Pretty much what I want is that I get a response from the server. It has 'items'. Its an array of elements that are html. How could I output them with a repeat?

And I really dont know what im doing. Thanks for help.

Thanks for the response. Yeah, Im getting this Uncaught Error: [$sce:itype] http://errors.angularjs.org/1.4.0/$sce/itype?p0=html I know it is something to do with the trusted html thing. But I dont understand why. How should it work then. — DaveLV2, Jun 04 '15 at 20:41
I'm confused by the code you have written here. If `$scope.ItemsData` is an HTML string, then how could you iterate over it with `ng-repeat`? Can you post some sample of what you are receiving in the function, and the output you are expecting? — Claies, Jun 04 '15 at 20:47
http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu — GANI, Jun 04 '15 at 20:49
No,no. ItemsData is actually an array that has html string data in it. — DaveLV2, Jun 04 '15 at 20:50

Pankaj Parkar · Answer 1 · 2015-06-04T20:51:26.743

2

You should never have been use $.ajax, that should be replaced the ajax call using $http service. Using $.ajax will not run digest cycle on its completion where $http does run digest cycle after callback gets called

Additionally your ng-bind would be ng-bind-html="trustedAsHtml(data)"

then your controller will have one method trustedAsHtml that will html as trusted using $sce service

$scope.trustedAsHtml = function(data){ return $sce.trustedAsHtml(data); }

edited Jun 04 '15 at 20:51

answered Jun 04 '15 at 20:44

Pankaj Parkar

134,766
23
234
299

@davelv2 this must have helpful to you..:) – Pankaj Parkar Jun 04 '15 at 20:52
@pankajpakar Your right too. So thanks for the help! :) – DaveLV2 Jun 04 '15 at 20:55
does that $sce part was helpful?? – Pankaj Parkar Jun 04 '15 at 21:03
I used the other one in the selected answer. – DaveLV2 Jun 04 '15 at 21:14

ShankarSangoli · Accepted Answer · 2015-06-04T20:58:10.477

1

You have to use the data variable which you have defined in ng-repeat for binding inside ng-bind-html. So change ItemsData to data.

<div ng-repeat="data in ItemsData track by $index" ng-bind-html='data'>
   <-data->
</div>

Also as you commented to the question you are getting error when executing $sce.trustAsHtml method, it is because you are passing an array response['items']when it expects a string.

Assuming response['items'] as an array of string you can try this.

$.ajax({
    method: "POST",
    url: "{{URL::route('items')}}",
    data: filteringData,
    dataType: 'json'
}).done(function(response) {
    $scope.ItemsData = [];
    angular.forEach(response.items, function(item) {
       $scope.ItemsData.push($sce.trustAsHtml(item));
    });
    $scope.ItemsPage += 1;
    $scope.ItemsLastPage = response['lastPage'];
    $scope.ItemsLoaderBusy = false;
});

Also as pointed by @pankajparkar you should try to use $http instead of jQuery ajax because it will run the digest cycle.

edited Jun 04 '15 at 20:58

answered Jun 04 '15 at 20:40

ShankarSangoli

69,612
13
93
124

Alright, the error is gone now. Now I need to only change it to use angular http to work right? – DaveLV2 Jun 04 '15 at 20:52
I made another update to the answer ..take a look and update in your code accordingly... then you should be good to go. – ShankarSangoli Jun 04 '15 at 20:53
1

OMG THANK YOU VERY MUCH! I HAVE BEEN DOING THIS FOR MORE THEN A COUPLE OF HOURS AND COULDN'T GET IT TO WORK! Btw, its not yelling caps locks its Happiness caps locks :) – DaveLV2 Jun 04 '15 at 20:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79702/discussion-between-davelv2-and-shankarsangoli). – DaveLV2 Jun 04 '15 at 21:01

Trying to output html with angular js

2 Answers2