infdig Infinite $digest Loop

infdig Infinite $digest Loop

本文关键字:Loop digest Infinite infdig      更新时间:2023-09-26

我正在学习AngularJs,但我不能使它工作。我读过关于消化循环的书,但我不太清楚。很明显,这段代码失败了,因为进入一个无限循环,但我不知道如何修复它。有人能帮帮我吗?

<!DOCTYPE html>
<html lang="eng" ng-app="test">
<head>
  <title>Learning Angular</title>
  <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
  <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js"></script>
  <script type="text/javascript">
    var app = angular.module('test', ['ngRoute']);
    app.factory('visitCounterService', function () {
      var counterService = function() {
        var _count = 1;
        var counter = function() { return _count++; };
        return { counter: counter }
      }();
      return counterService;
    });
    app.service('homeModel', ['visitCounterService', function(visitCounterService){
      this.getTitle = function() {
        var n = visitCounterService.counter();
        return "Welcome to this awesome demo. You are the visitor n° " + n;
      };
    }]);
    app.controller('homeController', ['$scope', 'homeModel', function($scope, homeModel) {
      $scope.home = homeModel;
    }]);
  </script>
</head>
<body ng-controller="homeController">
  <h3>{{home.getTitle()}}</h3>
</body>
</html>

谢谢你的建议!!

Angular在home.getTitle()表达式上注册了一个隐式的$监视。这个表达式将被调用至少两次,因为angular想要检查模型是否已经稳定。

每次调用home.getTitle()时,你的代码返回一个不同的字符串,所以angular继续消化,直到达到最大消化周期限制。

试题:

$scope.homeTitle = homeModel.getTitle();

<h3>{{homeTitle}}</h3>