нг-если не ловит обновленные значения $ scope

Question

нг-если не ловит обновленные значения $ scope

0

Я был далеко от angular 1.x так долго, я, кажется, забыл что-то важное о ng-if. У меня есть функция, которая обновляет значение области, когда карусель меняет изображения, которые отслеживают активный индекс массива карусели. У меня есть ng-if чтобы удалить один элемент и вставить другой, когда индекс достигнет конца массива, примерно так:

  <span ng-if="activeIndex < 4"
        class="back-button"
        ui-sref="app.profile.index({uID: user.uID})">
    Skip <i class="ion-chevron-right"></i>
  </span>

  <span ng-if="activeIndex === 4"
        class="skip-button"
        ui-sref="app.profile.index({uID: user.uID})">
    Continue <i class="ion-chevron-right"></i>
  </span>

но он не работает. Я полагаю, что ng-if создает новую область видимости, поэтому может быть и не улавливать обновленные значения, но если это так, то какой простой способ обновить область ng-if? Или я полностью обернулся?

Вот codepen показывающий мою проблему: http://codepen.io/datatype_void/pen/zqjGOr?editors=1001

datatype_void 20 апр. 2016, в 01:33

Источник

0

Почему вы храните $scope.activeIndex = '0'; как строка вместо int ?
user1027620 19 апр. 2016, в 23:01
0

Вы правы, это создает новую сферу. Вместо этого вы можете попробовать ngHide и ngShow.
aet 19 апр. 2016, в 23:02
0

Кстати, ваш максимальный индекс в предоставленной вами ручке составляет 2 ... Вы сравниваете это с 4 в вашей ng-if ...
user1027620 19 апр. 2016, в 23:05
0

Честные ошибки при перепечатке кода, спасибо, что указали на мои ошибки.
datatype_void 19 апр. 2016, в 23:09

Показать ещё 2 комментария

Теги:

javascript

angularjs

2 ответа

1

JavaScript:

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope, $timeout) {
  $scope.updateIndex = function(index) {
    $timeout(function() {
         $scope.activeIndex = index;
    });
  };

  $scope.options = {
    autoplay: 300,
    speed: 500,
    effect: 'cube',
    onSlideChangeStart : function(swiper){
      if (swiper.activeIndex !== 'undefined') {
        $scope.updateIndex(swiper.activeIndex);
      }
    }
  }

  $scope.updateIndex(0);
});

HTML:

<span ng-if="activeIndex < 2"
      ui-sref="app.profile.index({uID: user.uID})">

  Skip <i class="ion-chevron-right"></i>
</span>

<span ng-if="activeIndex == 2"
      ui-sref="app.profile.index({uID: user.uID})">

  Continue <i class="ion-chevron-right"></i>
</span>

AngularJS предоставляет $ timeout, что походит на setTimeout, но автоматически поменяет ваш код в $ apply по умолчанию.

Для получения дополнительной информации: http://www.codingeek.com/angularjs/angular-js-apply-timeout-digest-evalasync/

user1027620 19 апр. 2016, в 21:19

Ещё вопросы

Почему вы храните $scope.activeIndex = '0'; как строка вместо int ?
Вы правы, это создает новую сферу. Вместо этого вы можете попробовать ngHide и ngShow.
Кстати, ваш максимальный индекс в предоставленной вами ручке составляет 2 ... Вы сравниваете это с 4 в вашей ng-if ...
Честные ошибки при перепечатке кода, спасибо, что указали на мои ошибки.

C14L · Accepted Answer · 2016-04-19T20-18-00.000Z

Я добавил $scope.$apply(); после изменения activeIndex, и это решило проблему.

function(swiper){
  $scope.activeIndex = swiper.activeIndex;
  $scope.$apply();

хотя я не уверен, почему он не применяется автоматически.

Рабочий код: http://codepen.io/C14L/pen/bpKrLo?editors=1111

(также изменил максимальное значение на 2, потому что раньше он не доходил до 4, но это не проблема).