Question

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

Answer 1

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

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

虽然我不确定为什么它不会自动应用。

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

（也将最大值更改为2，因为它之前从未达到4，但这不是问题所在。）

Answer 2

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/

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

2 个答案: