datatype_void datatype_void - 7 months ago 30
Javascript Question

ng-if not catching updated $scope values

I have been away from

angular 1.x
for so long I seem to have forgotten something important about
ng-if
. I have a function which updates a scope value whenever a carousel changes images which is tracking the active index of the carousel array. I have
ng-if
set to remove one element and insert another when the index reaches the end of the array, something like this:

<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>


but it isn't working. I believe that
ng-if
creates a new scope so that may be why it isn't catching the updated values, but if that is the case, what is an easy way to update the scope of
ng-if
? Or am I completely turned around?

Here's a
codepen
showing my problem: http://codepen.io/datatype_void/pen/zqjGOr?editors=1001

Answer

I added a $scope.$apply(); after the activeIndex change, and that solved the problem.

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

though I'm not sure why it isn't applied automatically.

Working code: http://codepen.io/C14L/pen/bpKrLo?editors=1111

(also changed the max value to 2 because it never got to 4 before, but that wasn't the problem.)

Comments