Question

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

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

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

每次"$scope.place"发生变化时，

都不会更新。我想每当$scope.place值改变时，我们应该重新渲染这个段落，因为我们创建了一种与地方模型绑定数据的方式。

这段代码有什么错误吗？

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

＆＃13;

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

＆＃13;

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。这是一个黑客，不建议使用。但是，在使用其他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不起作用

1 个答案: