Angularjs ng-repeat with function returning html from a get

Question

I'm new to angularjs and trying to figure out what is going on here.

I have ng-repeat:

<li class="widget flip-container" ng-repeat="widget in widgets">
                 <div class="widgetContent" ng-bind-html="getData(widget.UserWidgetId,widget.Url)">
                 </div>
</li>

getData is a function:

 $scope.getData = function(id, url) {
            if (url == null || url == "") return "";                

            return userWidgetsFactory.getWidgetHtml(url).success(function(results) {
                return results;
            });
        };

the factory:

app.factory("userWidgetsFactory", function($http) {
        var factory = {};
        factory.getWidgetHtml = function(url) {
            return $http.get(url);
        };
        return factory;
    });

My problem is that the function is repeatedly called and wont stop. I know I'm doing to this so wrong.

widgets is a collection of objects that look like this: {"UserWidgetId":"77485504-7796-42b6-8b8a-c0e41e89ac69","UserId":0,"Theme":null,"WidgetId":"5926d2cc-4e6b-452c-951f-05a1aca6d627","Url":"/web/WeatherWidget/index","Col":1,"Row":1,"SizeX":1,"SizeY":2,"SectionId":"00000000-0000-0000-0000-000000000000","Name":"Weather","Icon":"fa-sun-o","UseRandomImage":false,"BackgroundImage":null,"Section":null} — racamp101
– racamp101, Commented Apr 14, 2014 at 19:35
Try binding html safely. stackoverflow.com/questions/19415394/… — Nish
– Nish, Commented Apr 14, 2014 at 20:05
that didn't seem to help. now i just get a blank nothing instead of the "{}" — racamp101
– racamp101, Commented Apr 15, 2014 at 0:02

Nish · Accepted Answer · 2014-04-14 19:43:59Z

1

Try this ... ng-bind-html adds a watch.

<li class="widget flip-container" ng-repeat="widget in widgets" ng-init="testdata = getData(widget.UserWidgetId,widget.Url)">
                 <div class="widgetContent"> {{testdata}}
                 </div>
</li>

answered Apr 14, 2014 at 19:43

Nish

1,7561 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

racamp101 Over a year ago

that stopped the repeating but all I get is "{}" showing up in each element

Nish Over a year ago

What is returned from getData? Make sure correct result is returned.

racamp101 Over a year ago

please see the getData function in my question. the data returned from the server is html

Collectives™ on Stack Overflow

Angularjs ng-repeat with function returning html from a get

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related