AngularJS timing issues with controller, AJAX, ng-repeat, and directive

Question

I just started a few days ago with AngualrJS (loving it) using the myApp example, but I'm not quite grasping some of the event timing yet.

I have a router that initiates a templateURL and a controller. The templateURL is a partial that uses ng-repeat to loop over JSON that I load with a controller. If the controller contains static JSON it seems to work as I intend but when I load the JSON using $http I start running into the timing issues:

The partial interprets before the $http returns throwing a 404 on things like image paths before they can be replaced -> "{{album.thumbnail}}.jpg"
I also have a directive that fires once after the controller launches the asynchronous $http call and again after the $http call actually completes within the controller (ideally I only want it to fire once after $http completion)

My intention is to use retrieve album JSON data via $http using ng-repeat to loop over a template to build out my gallery. Once it's done looping I'd like to call a final function that gives the gallery a Pinterest-like masonry layout. That's seem like a very typical flow ($http -> ng-repeat -> final function) so I've got to be missing something small at this point.

Looking forward to learning more about AngularJS...

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <title>myApp</title>
  </head>
  <body>

    <div ng-view></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/modernizr-transitions.js"></script>
    <script src="js/jquery.masonry.min.js"></script>
  </body>
</html>

Module

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])
.config(['$routeProvider', function ($routeProvider) {

  $routeProvider.when('/gallery', {templateUrl: 'gallery.html', controller: 'ctrlGallery'});
  $routeProvider.otherwise({redirectTo: '/gallery'});

 }]);

Controller

angular.module('myApp.controllers', [])
.controller('ctrlGallery', ['$scope', '$http', function (lcScope, lcHttp) {

  lcHttp.get("/services/gallery.php?start=1&count=12")
  .success(function(data, status, headers, config) {
    lcScope.albums = data.DATA;
  })

}]);

Directive

angular.module('myApp.directives', [])
.directive('postGalleryRepeatDirective', function () {

  return function (scope, element, attrs) {

    if (scope.$last) {
      $('#container').masonry({
        itemSelector: '.box',
        columnWidth: 250,
        isAnimated: !Modernizr.csstransitions,
        isFitWidth: true
      });
    }

  };

});

gallery.html partial

<div class="masonry" ng-controller="ctrlGallery">
  <div class="box masonry-brick" ng-repeat="album in albums" post-gallery-repeat-directive>
    <a href="{{ album.link }}">
      <img src="/img/{{ album.thumbnail }}.jpg">
    </a>
    <p>{{ album.name }}</p>
  </div>
</div>

urban_raccoons · Accepted Answer · 2014-04-16 02:34:47Z

0

It seems like you've forgotten to set $scope.last to true in your http get call? Were you intending to set that to true after the http call returned? If so, you can do a somewhat similar thing for the partial where you set ng-hide to the value of $scope.last. So it would hide the contents of the boxes (and the broken links pre correct interpolation) until the proper values had been set.

answered Apr 16, 2014 at 2:34

urban_raccoons

3,4971 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS timing issues with controller, AJAX, ng-repeat, and directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related