一种绑定方法在 AngularJS 中使用 setInterval 不起作用

Question

AngularJS 是 Angular 的第一个版本，不再相关。但是当我开始学习 Angular4 时，我想从 AngularJS 开始，这样我就可以探索框架的基础知识和目标。

下面的一段代码是为了演示一种数据绑定方式（更改模型重新渲染视图）但无法实现。

<p>One-Way Data-Binding: {{place}}</p>

不会在 "$scope.place" 每次发生变化时更新。我想这一段应该在每次 $scope.place 值更改时重新呈现，因为我们创建了一种与位置模型的数据绑定方式。

这段代码有没有错误？

使用一次性绑定（静态页面？）、单向绑定（股票信息）和双向绑定（更具交互性的站点）的最佳用例是什么？

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script>
    var app = angular.module('OneTimeBinding', []);
    app.controller('OneTimeBindingController', function($scope) {
      $scope.i = 0;
      $scope.places = [
        'Delhi', 'Gurgaon', 'Haryana', 'Punjab', 'Chennai', 'Noida', 'Mumbai', 'Pune', 'Nepal', 'Gujrat', 'Bihar', 'Uttrakhand'
      ];
      $scope.place = "Delhi";
      setInterval(function() {
          $scope.place = $scope.places[$scope.i];
          $scope.i++;
          if ($scope.i > 10) {
            $scope.i = 0;
          }
          console.log("$scope.place")
        },
        1000
      )
    });
  </script>
</head>

<body ng-app="OneTimeBinding" ng-controller="OneTimeBindingController">
  <div>
    <h2>Difference between One-Time and One-Way Data Bindings</h2>
    <br />
    <p>One-Time Data-Binding: {{::place}}</p>
    <p>One-Way Data-Binding: {{place}}</p>
  </div>
</body>

</html>

Answer 1

您需要使用 $interval，因为它是 AngularJS 摘要循环的一部分。将其注入您的控制器并替换 setInterval:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script>
    var app = angular.module('OneTimeBinding', []);
    app.controller('OneTimeBindingController', function($scope, $interval) {
      $scope.i = 0;
      $scope.places = [
        'Delhi', 'Gurgaon', 'Haryana', 'Punjab', 'Chennai', 'Noida', 'Mumbai', 'Pune', 'Nepal', 'Gujrat', 'Bihar', 'Uttrakhand'
      ];
      $scope.place = "Delhi";
      $interval(function() {
          $scope.place = $scope.places[$scope.i];
          $scope.i++;
          if ($scope.i > 10) {
            $scope.i = 0;
          }
          //console.log($scope.place)
        },
        1000
      )
    });
  </script>
</head>

<body ng-app="OneTimeBinding" ng-controller="OneTimeBindingController">
  <div>
    <h2>Difference between One-Time and One-Way Data Bindings</h2>
    <br />
    <p>One-Time Data-Binding: {{::place}}</p>
    <p>One-Way Data-Binding: {{place}}</p>
  </div>
</body>

</html>

可以使用一次性数据绑定来减少观察者的数量。通常当无法更改的预定义数据从后端到达时。或者当您使用 ng-repeat 列出数据时，您已经有了想要显示但不想要任何观察者的内容。（他们负责摘要周期中的动态变化）

由于 setInterval 不是摘要循环的一部分，您可以使用 $scope.$apply() 手动调用 $digest。这是一个 hack，不建议使用。但是，在使用其他 DOM 操作库（如 jQuery）时，它会很有用。这是一个带有手动摘要的示例：

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script>
    var app = angular.module('OneTimeBinding', []);
    app.controller('OneTimeBindingController', function($scope, $timeout) {
      $scope.i = 0;
      $scope.places = [
        'Delhi', 'Gurgaon', 'Haryana', 'Punjab', 'Chennai', 'Noida', 'Mumbai', 'Pune', 'Nepal', 'Gujrat', 'Bihar', 'Uttrakhand'
      ];
      $scope.place = "Delhi";

      setInterval(function() {
          $scope.place = $scope.places[$scope.i];
          $scope.i++;
          if ($scope.i > 10) {
            $scope.i = 0;
          }
          //console.log($scope.place)
          
          $scope.$apply(); // calling digest cycle
        },
        1000
      )

    });
  </script>
</head>

<body ng-app="OneTimeBinding" ng-controller="OneTimeBindingController">
  <div>
    <h2>Difference between One-Time and One-Way Data Bindings</h2>
    <br />
    <p>One-Time Data-Binding: {{::place}}</p>
    <p>One-Way Data-Binding: {{place}}</p>
  </div>
</body>

</html>

一种绑定方法在 AngularJS 中使用 setInterval 不起作用

One way binding doesn't work in AngularJS with setInterval

angularjs

data-binding

angularjs-scope