1

I've been trying out AngularJS by creating a simple gallery that gets images from a json file, but somehow I can't seem to display the data.

index.html:

<!DOCTYPE html>
<html ng-app="portfolioApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div ng-controller="GalleryController" >
        <ul>
            <li ng-repeat="image in gallery.galleryData">
                <a ng-href="">{{image.IMAGE_WIDTH}}
                    <img class="thumbnail" ng-src="{{IMAGE_LOCATION+image.image}}" />
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

app.js:

var app = angular.module('portfolioApp',[]);
app.controller('GalleryController',['$http', function($http){
  var gallery = this;
  gallery = [];

  gallery.IMAGE_WIDTH = 405;
  gallery.IMAGE_LOCATION = "http://rabidgadfly.com/assets/angular/gallery1/";

  $http.get("images.json").success(function(data){
  gallery.galleryData = data;  
});
}]);

I think the issue has something to do with the scope of the gallery variable, but i'm not sure: http://i.stack.imgur.com/VBGku.png

1
  • could you please tell me, what images.json contains? Jan 31, 2015 at 16:47

1 Answer 1

0

Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the "Angular realm" (controllers, services, Angular event handlers).

So you should add gallery to $scope then it can be accessed in the View:

var app = angular.module('portfolioApp',[]);
app.controller('GalleryController',['$http', '$scope', function($http, $scope){
  $scope.gallery = [];

  $scope.gallery.IMAGE_WIDTH = 405;
  $scope.gallery.IMAGE_LOCATION = "http://rabidgadfly.com/assets/angular/gallery1/";

  $http.get("images.json").success(function(data){
    $scope.gallery.galleryData = data;  
  });
}]);
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.