Question

运行下面的代码段时出现此错误。该代码实际上正在运行，但似乎存在问题。

angular.js:9037 Error: [$rootScope:infdig] http://errors.angularjs.org/undefined/$rootScope/infdig?p0=10&p1=%5B%5B%22f…5Ct%5C%5CtMi%5C%5Cn%20%20%20%20%5C%5Ct%5C%5Ct%5C%5Ct%5C%5Ct%5C%22%22%5D%5D
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
    at g.$get.g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:99:110)
    at g.$get.g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:101:12)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:415
    at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:328)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:323)
    at Wb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:30)
    at Oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:99)
    at HTMLDocument.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:198:494)
MINERR_ASSET:22 Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/undefined/$rootScope/infdig?p0=10&p1=%5B%5B%22f…5Ct%5C%5CtMi%5C%5Cn%20%20%20%20%5C%5Ct%5C%5Ct%5C%5Ct%5C%5Ct%5C%22%22%5D%5D

请在下方运行代码段以便进一步了解。

我收到此错误是因为当天名称循环低谷。删除以下内容时：

this.firstDay++;
if (this.firstDay == 6) {
  this.firstDay = 0;
}

没有错误，但只显示星期一

＆＃13;

(function() {

  var app = angular.module('myApp', []);

  app.controller('CalenderController', function() {
    this.days = dayNames;
    this.date = date;
    this.firstDay = 0;

    this.getDays = function(num) {
      return new Array(num);
    };

    this.getDayName = function() {
      this.firstDay++;
      if (this.firstDay == 6) {
        this.firstDay = 0;
      }
      return dayNames[this.firstDay];
    };
  });

  //Variables 
  var dayNames = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
  var date = {
    '2015': [{
      'month': 'Januar',
      'day': 31
    }, {
      'month': 'Februar',
      'day': 28
    }, {
      'month': 'März',
      'day': 31
    }, {
      'month': 'April',
      'day': 30
    }, {
      'month': 'Mai',
      'day': 31
    }, {
      'month': 'Juni',
      'day': 30
    }, {
      'month': 'Juli',
      'day': 31
    }, {
      'month': 'August',
      'day': 31
    }, {
      'month': 'September',
      'day': 30
    }, {
      'month': 'Oktober',
      'day': 31
    }, {
      'month': 'November',
      'day': 30
    }, {
      'month': 'Dezember',
      'day': 31
    }]
  };
})();

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>


<div class="container" ng-app="myApp" ng-controller="CalenderController as calender">
  <table ng-repeat="date in calender.date.2015" class="table table-striped table-bordered">
    <thead>
      <tr class="info">
        <td colspan="{{date.day}}"> {{date.month}} </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td ng-repeat="_ in calender.getDays(date.day) track by $index">
          {{calender.getDayName()}}
        </td>
      </tr>
      <tr>
        <td ng-repeat="_ in calender.getDays(date.day) track by $index">
          {{$index + 1 }}
        </td>
      </tr>
    </tbody>

  </table>
</div>

＆＃13;

Answer 1

将this.firstDay更改为var firstDay，即javascript变量。问题在于它是范围变量this.firstDay，内部有角度监视，并且每当发生任何范围更新时，它立即运行摘要周期，在您的情况下，this.firstDay更新确切4015时间，这导致digest周期的无限循环，我不认为你在控制器内的任何地方使用这个范围变量。所以最好把它变成javascript var

<强>控制器

   app.controller('CalenderController', function(){
        this.days = dayNames;
        this.date = date;
        var firstDay = 0;

        this.getDays = function(num){
            return new Array(num);
        };

        this.getDayName = function(){
            firstDay++;
            if(firstDay == 6){
                firstDay = 0;
            }
            return dayNames[this.firstDay];
        };
    });

Working Plunkr

希望这可以帮到你。感谢。

AngularJs：创建日历

1 个答案: