AngularJs：创建日历 [英] AngularJs: Creating a calender
本文介绍了AngularJs：创建日历的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我运行下面的代码片段时，有这样的错误。
的code为actualy工作，但似乎是一个问题。
angular.js：9037错误：[$ 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
在错误（原生）
在https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
在克$ get.g. $摘要（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:99:110）
在克$ get.g. $申请（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:101:12）
在https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:415
在Object.d [如调用（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:328）
在C（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:323）
在WB（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:30）
在OC（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:99）
在HTMLDocument的＆LT;＆匿名GT; （https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:198:494）
MINERR_ASSET：22未捕获的错误：[$ 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 ++;
如果（this.firstDay == 6）{
this.firstDay = 0;
}
有没有错误，但只显示周一
\r
\r\r
\r（函数（）{\r
\r
VAR应用= angular.module（'对myApp'，[]）;\r
\r
app.controller（'CalenderController'，函数（）{\r
this.days = DayNames中;\r
this.date =日期;\r
this.firstDay = 0;\r
\r
this.getDays =功能（NUM）{\r
返回新的Array（NUM）;\r
};\r
\r
this.getDayName =功能（）{\r
this.firstDay ++;\r
如果（this.firstDay == 6）{\r
this.firstDay = 0;\r
}\r
返回DayNames中[this.firstDay]\r
};\r
}）;\r
\r
//变量\r
VAR DayNames中= ['莫'，'迪'，'米'，'做'，'神父'，'萨'，'所以'];\r
VAR日期= {\r
2015年'：[{\r
月：Januar，\r
一天：31\r
}，{\r
月：Februar，\r
一天：28\r
}，{\r
月：马兹'，\r
一天：31\r
}，{\r
月：四月，\r
一天：30\r
}，{\r
'月'：'麦'，\r
一天：31\r
}，{\r
月：六月'，\r
一天：30\r
}，{\r
月：巨力，\r
一天：31\r
}，{\r
月：八一，\r
一天：31\r
}，{\r
'月'：'九月'，\r
一天：30\r
}，{\r
月：十月，\r
一天：31\r
}，{\r
月：11月份，\r
一天：30\r
}，{\r
'月'：'Dezember'，\r
一天：31\r
}]\r
};\r
}）（）; \r
＆LT;链接HREF =https://maxcdn.bootstrapcdn.com/bootstrap /3.3.2/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js＆GT;＆下; /脚本＆GT;\r
\r
\r
＆LT; DIV CLASS =容器NG-应用=对myAppNG控制器=CalenderController为日历＆GT;\r
＆LT;表NG-重复=日期calender.date.2015级=table表条纹表镶上＆GT;\r
＆LT;＆THEAD GT;\r
＆LT; TR类=信息＆GT;\r
＆LT; TD合并单元格={{date.day}}＆GT; {{date.month}}＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / THEAD＆GT;\r
＆LT;＆TBODY GT;\r
＆所述; TR＆GT;\r
＆LT; TD NG重复=_由$指数calender.getDays（date.day）跟踪＆GT;\r
{{calender.getDayName（）}}\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR＆GT;\r
＆LT; TD NG重复=_由$指数calender.getDays（date.day）跟踪＆GT;\r
{{$指数+ 1}}\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT; \r
解决方案
修改 this.firstDay 到 VAR firstDay 即JavaScript变量。问题是当它的范围变量 this.firstDay ，它内部的角度看的地方，每当任何范围更新时它运行它消化周期瞬间，你的情况下 this.firstDay 是更新准确 4015 倍，从而导致 VAR
控制器
app.controller（'CalenderController'，函数（）{
this.days = DayNames中;
this.date =日期;
变种firstDay = 0; this.getDays =功能（NUM）{
返回新的Array（NUM）;
}; this.getDayName =功能（）{
firstDay ++;
如果（firstDay == 6）{
firstDay = 0;
}
返回DayNames中[this.firstDay]
};
}）;
希望这可以帮助你。谢谢你。
I have this error when running the snippet below. The code is actualy working, but there seem to be a problem.
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
Please run snippet below for further understanding.
I get this error because of the day names im looping trough. When deleting following:
this.firstDay++;
if (this.firstDay == 6) {
this.firstDay = 0;
}
There is no error, but Only Monday is displayed
(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
}]
};
})();
<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>
解决方案
Change this.firstDay to var firstDay i.e. javascript variable. The issue is while it is scope variable this.firstDay, angular internally place watch on it, and whenever any scope update occurs it run it digest cycle instantly, in you case this.firstDay is update exact 4015 times, that leads to an indefinite loop of digest cycle, and i don't think you are using this scope variable anywhere inside the controller. So better make it javascript var
Controller
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];
};
});
Hope this could help you. Thanks.
这篇关于AngularJs：创建日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
