ng，如果没有捕获更新的$scope值

ng-if not catching updated $scope values

本文关键字：scope 更新 如果没有 ng      更新时间：2023-09-26

我离开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

我在activeIndex更改后添加了一个$scope.$apply();，这就解决了问题。

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

尽管我不知道为什么它没有自动应用。

工作代码：http://codepen.io/C14L/pen/bpKrLo?editors=1111

（还将最大值更改为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:

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

相关文章：