given that service ( just fetching a json on the server )
SushiServices = angular.module("SushiServices",[])
SushiServices.factory("DataTypeService",["$http",($http)->
self = {}
self._data = []
self._inilialized = false
return ->
if self._inilialized ==false
$http.get("data/types.json").success (data)->
self._data = data;
self._inilialized = true
return self._data
])
let say i use that service in a controller :
ProductListController = ($scope,$rootScope,$http,$filter,DataTypeService)->
###
EN : manage product list display
FR : gère l'affichage de la liste de produits
###
$rootScope.types = DataTypeService()
$rootScope.types is used in a repeated , now the issue is obvious : - When i render my page , the json has not been fetched successfull yet , so nothing shows up in my repeater.
how can i design my app so , the template updates itself when something returns from the server ? thanks
the template :
<span ng-repeat='type in types'>
<a href='javascript:void 0;' ng-click="addToSelectedTypes(type.id)" class='label trans' style="font-size: 15px" ng-class="getSelectedClass(type.selected)" >{{type.name | capitalize }}</a>
</span>
The problem is you return self._data from the function returned from the service. Return whole self object (from the function returning from DataTypeService factory) and adjust the view to use the types._data. Then the markup should update automatically.
Or, you can make some preloader which will be displayed while no data available yet:
<div class="preloader" ng-show="!types._initialized"></div>
And your repeater will be hidden for a while (and displayed when data loaded correctly):
<div ng-show="types._initialized">
<span ng-repeat="type in types._data">
<a href="javascript:void 0;">{{type.name | capitalize }}</a>
</span>
</div>