I'm a beginner when it comes to the Ionic Framework, and I've encountered an issue with loading images.
After receiving a list of image URLs from the server through a GET request, I can see the images' layout in Chrome's "Inspect element" tool, but they are not visible on the page for some reason.
Do I need to preload the images into cache before displaying them?
Here is the code snippet:
Starting with app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'ImagesDashCtrl'
});
$urlRouterProvider.otherwise('/main');
});
Moving on to controllers.js:
angular.module('starter.controllers', [])
.controller('ImagesDashCtrl', function($scope, myImages) {
$scope.images = [];
$scope.loadImages = function() {
myImages.getDownloadedImages().then(function(images){
$scope.images = images;
});
}
});
And finally, services.js:
angular.module('starter.services', [])
.factory('myImages', function($http) {
var myDownloadedImages = [];
return {
getDownloadedImages: function() {
return $http.get('http://www.test1.com').then(function(response) {
myDownloadedImages = response.data;
return myDownloadedImages;
});
}
} });
In main.html, a simple ng-repeat loop is used to display the images. Additionally, "ion-nav-view" is included in index.html.
Thank you for your assistance!