OnsenUI AngularJS数据绑定无法正常工作

OnsenUI AngularJS data binding not working properly

本文关键字：工作 常工作 AngularJS 数据绑定 OnsenUI      更新时间：2023-09-26

我创建了一个关于我将要做的事情的简单示例：

ons.bootstrap()
  .controller('AppController', function($scope) {
    $scope.x = 0;
    setInterval(function() {
      $scope.x = $scope.x + 1;
    }, 500)
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.3.15/js/onsenui.min.js"></script>
<ons-page ng-controller="AppController">
  <ons-list>
    <ons-list-header>Switch</ons-list-header>
    <ons-list-item>
      <br/>
      This value should change every 500 milisecond: {{ x }}
      <br/>
    </ons-list-item>
    <ons-list-item>
      <div class="center">
        Switch is {{ switch ? 'on' : 'off' }}
      </div>
      <div class="right">
        <ons-switch ng-model="data.switch"></ons-switch>
      </div>
    </ons-list-item>
  </ons-list>
</ons-page>

作为一个正常的角度（具有双向数据绑定）应用程序，控制器中的任何更改都将导致视图更新，反之亦然。但与OnsenUI结合使用时，只有当一个onsen组件更改时才会更新视图。有什么方法可以通知onsen发生了什么（需要查看更新）。

像这样尝试

ons.bootstrap()
.controller('AppController', function($scope) {
 $scope.x = 0;
  setInterval(function() {
   $scope.$evalAsync(function () {
                $scope.x = $scope.x + 1;
            });
 }, 500)
});

编辑：

或者像@Pankaj Parkar这样说的那样使用$interval。在使用$interval之前，你应该在你的控制器中注入这个服务。

 $interval(function () {
   $scope.x = $scope.x + 1;               
 }, 500);
相关文章：