AngularJS : view not updating

Question

My directive with controller :

app.directive("photoGallery", function() {
    return {
        restrict: 'E',
        templateUrl: 'part/photoGallery.html',
        controller: ["$http", function($http) {
            me = this;
            this.autoSlide = true;
            this.currentIndex = 2;
            this.autoSlide_timer;
            this.photos = [{}];

            this.Show = function(index) {
                me.currentIndex = index;
            };

            this.Next = function() {
                me.currentIndex++;
                console.log(me.currentIndex);
                if (me.currentIndex >= me.photos.length) {
                    me.currentIndex = 0;
                }
                me.Show(me.currentIndex);
            };

            this.Prev = function() {
                me.currentIndex--;
                if (me.currentIndex < 0) {
                    me.currentIndex = me.photos.length-1;
                }
                me.Show(me.currentIndex);
            };

            this.Init = function() {
                $http.get("img/slider/_data.json")
                .success(function(data) {
                    me.photos = data;
                    for(var i in me.photos) {
                        me.photos[i].index = i;
                    }
                    console.info(me.photos);
                })
                .error(function(e){
                    console.error(e);
                });
                this.autoSlide_timer = setInterval(this.Next, 1500);
            }();
        }],
        controllerAs: 'gallery'
    };
});

photoGallery.html :

<div class="GalleryContainer">{{gallery.currentIndex}}
    <div class="PhotoWrapper">
        <div ng-repeat="photo in gallery.photos" class="photo" ng-class="{active:gallery.currentIndex == photo.index}">
            <img ng-src="img/slider/{{photo.path}}">
        </div>
    </div>
</div>

as you can see, in the Next() function, I log currentIndex Next() is called every 1500ms thanks to setInterval(this.Next, 1500) in the Init() function. I can see in the console : 2, 3, 4, ... 10, 0, 1, 2 ...

But in the browser, {{gallery.currentIndex}} is never updated, it display the default value (2) (photoGallery.html line 1)

Like @RahilWazir mentioned, use $interval or make a manual call to $scope.$apply() in your interval function (this.Next). setInterval exists outside the angular scope so you won't get any 'auto update' functionality. — csbarnes
– csbarnes, Commented Jul 22, 2015 at 20:45
Thanks, but in my controller, thisrefers to the window element... (I did console.log(this); at the end of Init()) — Apolo
– Apolo, Commented Jul 22, 2015 at 20:49

Freezystem · Accepted Answer · 2015-07-23 05:26:41Z

1

You have to use angular $interval() instead of JavaScript setInterval() function. Why ?

Because Angular needs to know when variables are updated. $interval make a call to $scope.$apply() at the end of its execution, executing a new $digest loop that notify the update to angular.

You can also wait the request to be successfully proceed to set you interval, to avoid errors.

this.Init = function() {
    $http.get("img/slider/_data.json")
    .success(function(data) {
        me.photos = data;
        for(var i in me.photos) {
            me.photos[i].index = i;
        }
        console.info(me.photos);

        me.autoSlide_timer = $interval(me.Next, 1500);
    })
    .error(function(e){
        console.error(e);
    });
}();

edited Jul 23, 2015 at 5:26

answered Jul 22, 2015 at 20:55

Freezystem

4,8831 gold badge37 silver badges38 bronze badges

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

7 Comments

Rahil Wazir Over a year ago

Its not $setInterval, its $interval

Apolo Over a year ago

I guess $interval was one of my problems, thanks. But it seems like I have a scope problem: in controller's functions, this refers to the window element (top DOM element)

Freezystem Over a year ago

Have you tried to refer to window using angular $window instead of this ?

Apolo Over a year ago

I want this to refer to the Model.

Apolo Over a year ago

so when I declare this.Next = function () /*...*/ in the controller, Next become a method of my model

|

Collectives™ on Stack Overflow

AngularJS : view not updating

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related