Question

我尝试了解Angular中的超时，但我使用时遇到问题标准方式的超时以及$ scope。$ apply。为什么是第二个控制器打电话给第一个？标准（第一个）不应该工作，但它在第二个控制器被调用后工作。为什么呢？

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.mydata1 = 'Timeout1...';
  setTimeout(function(){
      
        $scope.mydata1='1';   
      
      
    },2000);
  
});
app.controller('applyCtrl', function($scope) {
  $scope.mydata = 'Timeout2...';
  setTimeout(function(){
      $scope.$apply(function(){
        $scope.mydata='2';  
      });
      
    },6000);
  
});
app.controller('timeCtrl', function($scope,$timeout) {
  $scope.mydata = 'Timeout3...';
  $timeout(function(){
    $scope.mydata='3';
  },8000);
  
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Timeout</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
  <script src="app.js"></script>
</head>

<body>
  <pre>1.Standard Timeout 2sec</pre>
  <div ng-controller="MainCtrl">
    <input type="text" ng-model="mydata1">
    <h1>{{mydata1}}</h1>

  </div>
  <hr>
  <pre>2.With $scope.$apply 6sec</pre>
  <div ng-controller="applyCtrl">
    <input type="text" ng-model="mydata">
    <h1>{{mydata}}</h1>

  </div>
  <hr>
  <pre>3.With $timeout 8sec</pre>
  <div ng-controller="timeCtrl">
    <input type="text" ng-model="mydata">
    <h1>{{mydata}}</h1>

  </div>
</body>

</html>

Answer 1

当角色发生变化时，角色会更新视图。 Angular看起来不是整个范围（因为性能），所以它更像是制作消息＆＃34;嘿，我已经改变了一些东西，你可以刷新视图并运行观察者。＆＃34;而$apply就是这种事。

当您在角度内部使用某些内容（如$timeout）时，angular知道您可能已更改了范围内的内容并运行摘要周期，但是当您使用setTimeout时，angular不会注意到那（因为它发生在外面）。

第一个实际上改变了范围，但有角度确实注意到了这一点。第二个触发超时回调执行后的视图刷新，这就是视图更新的原因。

显然，你不应该使用第一种或第二种方法。第三种方式只是有效的方法。

您可以在此处查看更多内容：http://www.sitepoint.com/understanding-angulars-apply-digest/

在您开始阅读之前，请注意，在视图中使用{{ expression }}调用scope.$watch()并创建观察者。

Angular中具有多个控制器的超时

1 个答案: