Javascript 如果未捕获更新的$scope值，则为ng

我已经远离

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

显示了我的问题：

我添加了一个

$scope.$apply（）在activeIndex更改后，这解决了问题

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

虽然我不知道为什么它不是自动应用的

工作代码：

（还将最大值更改为2，因为它以前从未达到4，但这不是问题。）
我添加了一个
$scope.$apply（）在activeIndex更改后，这解决了问题

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

虽然我不知道为什么它不是自动应用的

工作代码：

（还将最大值更改为2，因为它以前从未达到4，但这不是问题所在。）
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:


跳过
继续

AngularJS提供$timeout，这与setTimeout类似，但默认情况下会自动将代码包装在$apply中

有关更多信息：
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:


跳过
继续

AngularJS提供$timeout，这与setTimeout类似，但默认情况下会自动将代码包装在$apply中

有关更多信息：
为什么要存储
$scope.activeIndex='0'
作为字符串而不是
int
？没错，它创建了一个新的作用域。您可以尝试使用ngHide和ngShow。顺便说一句，您提供的笔的最大索引是
2
。。。您正在将其与您的
ng if
中的
4
进行比较。在重新键入代码时出现了诚实的错误，谢谢您指出我的错误。您为什么要存储
$scope.activeIndex='0'
作为字符串而不是
int
？没错，它创建了一个新的作用域。您可以尝试使用ngHide和ngShow。顺便说一句，您提供的笔的最大索引是
2
。。。您正在将其与您的
ng if
中的
4
进行比较。在重新键入代码时出现了诚实的错误，谢谢您指出我的错误。