node.js - How to make API function call inside ng-repeat? -
i have scope function defined in controller calling api fetch data database. using scope function inside ng-repeat. when run application, getting hanged, know little bit dirty checking, not able find how handle such situation.
in controler:
$scope.gettranslatedtext = function (categoryid, categorydetailid, languageid) { $http.get('api/datacategorydetailtranslations' + '/' + categoryid + '/' + categorydetailid + '/' + languageid). success(function (data) { return data.datacategorydetailtranslations; }); };
inside index.jade
li(ng-repeat="property in properties track property.propertyid | orderby : 'region'" ng-init="abc=compute()" menuhover itemscope itemtype="http://schema.org/hotel") a(ng-href='{{property.urlname}}') img.hotelimage(ng-src='http://cdn.objects.florahospitality.com/media/property/thumbnail/{{property.propertythumbnail}}' alt="{{property.propertyname}}" style="height:36px;width:40px;") div.column2 p.hotelname(itemprop="name") {{property.propertyname}} div.thumbsupnav(florapopover template="thumbsupnav") span.sprite_image.white_thumbs_up_icon p.starrating span(class="{{property.starrating}}") span(ng-show="property.visible", style="width:310px;") {{property.starrating}} p.hoteladdress span(itemprop="location") {{gettranslatedtext(2, property.streetaddress, 1)}} span.viewmap(data-item="4" itemprop="geo" itemscope="" itemtype="http://schema.org/geocoordinates") (show map) meta(itemprop="latitude" content="25.2530800688814") meta(itemprop="latitude" content="55.3282535076141")
when place function inside of view interpolation, gets evaluated @ least twice every digest cycle, can many times per second. such, not idea put api call 1 of these functions.
consider using directive instead. like:
.directive('gettranslatedtext', function($http){ return { scope: { categoryid: '@catid', categorydetailid: '@catdetailid', languageid: '@langid' }, link: function(scope, element, attrs) { $http.get('api/datacategorydetailtranslations' + '/' + scope.categoryid + '/' + scope.categorydetailid + '/' + scope.languageid) .success(function (data) { scope.translated = data.datacategorydetailtranslations; }); }, template: '<span itemprop="location">{{translated}}</span>' } });
... appear in view looking this:
<span get-translated-text cat-id="2" cat-detail-id="{{property.streetaddress}}" lang-id="1"></span>
the api call run once per directive instance, @ point when linking function called.
here demo, exhibits concept doesn't work result of network request being invalid.
as aside, $http
calls better contained inside of services, other angular components may call rather in controller or directive. included in directive here, however, avoid introducing many moving parts in answer.
Comments
Post a Comment