AngularJS: см, не обновляя

Question

Моей директивы с контроллером:

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> 

, как вы можете видеть, в функции Next(), я вхожу currentIndex Далее() вызывается каждые 1500 мс благодаря setInterval(this.Next, 1500) в функции Init(). Я могу видеть на консоли: 2, 3, 4, ... 10, 0, 1, 2 ...

Но в браузере {{gallery.currentIndex}} не обновляется, отображается значение по умолчанию (2) (photoGallery.html строка 1)

Answer 1

Вы должны использовать угловой $interval() вместо JavaScript setInterval() функция. Зачем ?

Потому что Angular должен знать, когда переменные обновляются. $interval позвоните в $scope.$apply() в конце его выполнения, выполняя новый цикл $digest, который уведомляет обновление угловым.

Вы также можете дождаться, когда запрос будет успешно выполнен, чтобы установить интервал, чтобы избежать ошибок.

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); 
    }); 
}();