时间戳

首页 > 解决方案 > One way binding doesn't work in AngularJS with setInterval

angularjs - One way binding doesn't work in AngularJS with setInterval

问题描述

AngularJS is the first version of Angular and is not relevant any more. But as I started learning Angular4, I wanted to start right from AngularJS so that I can explore the fundamentals and objectives of the framework.

The below piece of code is to demonstrate one way data binding (changing the model re-renders the view) but unable to achieve it.

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

is not updated every time there is change in the "$scope.place". I suppose this paragraph should re render every time $scope.place value changes as we created one way data binding with place model.

is there any mistake with this code?

what are the best use cases for using one time binding (static pages?), one way binding(stock information) and two way binding(more interactive site)?

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

标签： angularjsdata-bindingangularjs-scope

解决方案

您需要使用$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不是摘要循环的一部分，您可以使用 $digest 手动调用$scope.$apply(). 这是一个hack，不建议使用。但是，在使用 jQuery 等其他 DOM 操作库时，它会很有用。这是手动摘要的示例：

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

推荐阅读