Question

我所做的就是在一个区间内增加一个数字。这工作到600，然后视图停止更新（变量仍然在后台更新）。如果我将间隔时间减少到500，则增量值会上升到1200，这使我认为它与时间有关，导致此行为。实际变量不断增加，但绑定中断，视图不会更新。

app.controller('testCtrl', function($state, $scope, $cordovaSQLite,  $filter, $timeout,$ionicHistory){

setInterval(function(){

      $scope.u_stepCount += 200;
      console.log( $scope.u_stepCount );
    }, 1000);

});


<ion-view title="Test">
 <ion-content class="dashboard-background">
   <p id="steps">{{u_stepCount}}</p>
   <p id="test_steps"></p>
  </ion-content>  

</ion-view>

Answer 1

有几件事

您应该使用$interval服务而不是setInterval，这将在每次调用函数回调后处理运行摘要。
将Dot rule定义为ion-content directive create a prototypically inherited child scope时，请关注ng-model。比如$scope.model = { u_stepCount: 0 } 或者你可以在定义控制器时使用控制器作为模式。您将从控制器中删除$scope并将this（上下文）暴露给视图绑定。

您的代码更改将如下所示。

<强> HTML

<ion-view title="Test">
 <ion-content class="dashboard-background">
   <p id="steps">{{model.u_stepCount}}</p>
   <p id="test_steps"></p>
  </ion-content>  
</ion-view>

<强>代码

//removing other dependency that you had just to make code cleaner
//you can have it there if you needed in your actual codebase
app.controller('testCtrl', function($state, $scope, $interval){ //<-inject $interval here
    $scope.model = { u_stepCount: 0 };
    $interval(function(){
      $scope.model.u_stepCount += 200 ;
      console.log( $scope.u_stepCount );
    }, 1000);
});

Answer 2

要获得预期结果，请使用$ scope.apply

setInterval(function(){
  $scope.$apply(function () {
      $scope.u_stepCount += 200;
       console.log( $scope.u_stepCount );

    }, 1000);
});

http://codepen.io/nagasai/pen/zBmLmj

实现相同结果的推荐方法是使用$ interval

JS：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$interval) {
  $scope.u_stepCount=0;
$interval(function(){
       $scope.u_stepCount += 200;
       console.log( $scope.u_stepCount );

    }, 1000);

});

http://codepen.io/nagasai/pen/rLqAQG

在区间中增加变量会中断数据绑定

2 个答案: