I'm new with ionic-framework. I'm running the application in the browser. I'm experiencing an issue after I call a factory service. The template is not refreshing its content. The most weird thing is that when I resize the browser I'm able to see the content (images).
This is my Controller:
angular.module('Tijeras.controllers').controller('PromocionesCtrl', function($scope, categoriaService, $ionicPopup, $ionicLoading) {
$scope.items = [];
$scope.promocionDetalle = function(id) {
$ionicPopup.alert({
title: id
});
};
function getPromociones() {
$ionicLoading.show({
template: 'Loading...'
});
categoriaService.getCategoriaByID(1)
.success(function(data, status, headers, config) {
$ionicLoading.hide();
$scope.items = data;
$scope.$apply();
})
.error(function(data, status, headers, config) {
$ionicPopup.alert({
title: "Error, no se pudo invocar el servicio"
});
$ionicLoading.hide();
});
};
function init() {
getPromociones();
};
init();
});
My factory
var TijerasApp = angular.module('TijerasApp');
TijerasApp.factory('categoriaService', function($http){
return {
getCategoriaByID: function(id, callback){
return $http.get('http://192.168.1.9:8080/CategoriaService/categoria/1');
}
}
});
The template
<ion-view view-title="Promociones">
<ion-pane>
<ion-slide-box>
<ion-slide ng-repeat="item in items">
<ion-content>
<img class="img-responsive" src="{{item.image}}" ng-click="promocionDetalle({{item.id}})">
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-pane>
The result from the REST invocation is the following:
[{
id: 5443544353,
rootCategory: 3,
image: "img/promociones/fashion1.jpg",
text: "shampoos rehidratantes",
description: "/promociones/fashion1.jpg"
}, {
id: 2321312,
rootCategory: 3,
image: "img/promociones/fashion1.jpg",
text: "shampoos rehidratantes",
description: "/promociones/fashion1.jpg"
}]