AngularJS issue with http get result

Question

I have the following code:

app.controller('carouselCtrl', ['$scope', '$http', function($scope, $http){
    $http.get('/app/ajax/get-favs.php').then(function(response){
        $scope.slides = response.data;
    });
}]);

app.directive('slider', function($timeout) {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            slides: '='
        },
        link: function(scope, elem, attrs) {
            scope.currentIndex=0;

            [...]

            scope.$watch('currentIndex', function(){
                scope.slides.forEach(function(slide){
                    slide.visible=false;
                });
                scope.slides[scope.currentIndex].visible=true;
            });
        },
        templateUrl: '/app/includes/slider.html'
    };
});

My browser console returns:

Error: scope.slides is undefined .link/ [...] in line 55 (scope.slides.forEach....)

But if I write the $scope.slides object manually instead getting with $http.get the app works correctly. In other words, I can't call the scope.slides object from directive in scope.$watch.

What's wrong?

Can you post the html surrounding slider and carouselCtrl? — Matthew Cawley
– Matthew Cawley, Commented Feb 22, 2017 at 13:59
I'm not quite sure why you define slides in the directive; since you are not passing your slides to the directive but retrieve them, right? I have a slight feeling Angular is already digesting your directive before the http call is resolved. — Robbenu
– Robbenu, Commented Feb 22, 2017 at 14:00

Fissio · Accepted Answer · 2017-02-22 14:14:42Z

1

When you initialize the page, scope.slides doesn't exist yet (= it's undefined). It will only get a value once the api call is complete. Add a check for the existence of scope.slides in your directive:

scope.$watch('currentIndex', function(){
  if (!scope.slides) return; // Added row
  scope.slides.forEach(function(slide){
    slide.visible=false;
  });
  scope.slides[scope.currentIndex].visible=true;
});

answered Feb 22, 2017 at 14:14

Fissio

3,75818 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

AngularJS issue with http get result

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