Javascript AngularJS ng重复不更新DOM节点

我正在使用AngularJS创建一个简单的日历指令。一切都很好，即它呈现正确，并改变了一个月，正如你所期望的

但是，当月份更改且范围更新时，会正确渲染日历，但在ng repeat中创建的所有DOM节点的id与前一个月最后一个数组中的相同。我试过使用trackby子句，但没有用

这是我的代码类型脚本：

testApp.directive('calendar', () => {
    return {
        restrict: 'EA',
        scope: {
            startDate: '=?'
        },
        link: (scope: any, element, attrs) => {
            var today = new Date(),
                dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            //monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

            angular.extend(scope, {
                dayNames: dayNames,
                weeks: []
            });

            var startDate;
            if (scope.startDate) {
                try {
                    startDate = scope.startDate = new Date(scope.startDate);
                } catch (err) {
                    startDate = scope.startDate = today;
                }
            } else {
                startDate = scope.startDate = today;
            }

            function EvaluateCalendar(date, callback?: Function) {
                scope.weeks = [];
                var monthStart = new Date(date.getFullYear(), date.getMonth(), 1),
                    monthEnd = new Date(date.getFullYear(), (date.getMonth() + 1), 0),
                    daysInMonth = monthEnd.getDate();

                var startPadding = monthStart.getDay(),
                    endPadding = dayNames.length - (monthEnd.getDay() + 1);

                var totalMonth = GetTotalMonth(startPadding, daysInMonth, endPadding);
                var monthWeeks = GenerateWeeks(totalMonth);
                scope.weeks = monthWeeks;
                console.dir(scope.weeks);
                if (callback) callback();
            }

            function GetTotalMonth(startPadding, daysInMonth, endPadding): Array<any> {
                var totalMonth = [],
                    daySpacer = {
                        id: '',
                        currentMonth: false,
                        weekend: false,
                        date: ''
                    };
                for (var i = 0; i < startPadding; i++) {
                    var preSpacer = Object.create(daySpacer);
                    preSpacer.id = 'pre' + i;
                    totalMonth.push(preSpacer);
                };
                for (var j = 0; j < daysInMonth; j++) {
                    var day = new Date(startDate.getFullYear(), startDate.getMonth(), j + 1);
                    totalMonth.push({
                        id: day.toISOString().split('T')[0],
                        currentMonth: true,
                        weekend: (day.getDay() == 0 || day.getDay() == 6),
                        date: day
                    });
                };
                for (var k = 0; k < endPadding; k++) {
                    var postSpacer = Object.create(daySpacer);
                    postSpacer.id = 'post' + k;
                    totalMonth.push(postSpacer);
                };
                return totalMonth;
            };

            function GenerateWeeks(totalMonth): Array<any> {
                var monthWeeks = [];
                var currentWeek = [];
                $.each(totalMonth, (index, item) => {
                    currentWeek.push(item);
                    if ((index + 1) % 7 === 0) {
                        monthWeeks.push(currentWeek);
                        currentWeek = [];
                    }
                });
                return monthWeeks;
            };

            EvaluateCalendar(startDate, () => {
                scope.$watch('startDate', (newValue, oldValue) => {
                    if (newValue != oldValue) EvaluateCalendar(new Date(newValue));
                });
            });
        },
        controller: ['$scope', '$element', ($scope, $element) => {

            $scope.nextMonth = () => {
                var startDate: Date = new Date($scope.startDate);
                $scope.startDate = startDate.setMonth(startDate.getMonth() + 1);
            };

            $scope.previousMonth = () => {
                var startDate: Date = new Date($scope.startDate);
                $scope.startDate = startDate.setMonth(startDate.getMonth() - 1);
            };

        }],
        template: '<div class="calendar">' +
        '<div class="month-header">' +
        '<div class="month-control-group">' +
        '<a href="#" class="month-btn month-prev" ng-click="previousMonth()"><span class="fa fa-chevron-left fa-fw"></span></a>' +
        '<a href="#" class="month-btn month-next" ng-click="nextMonth()"><span class="fa fa-chevron-right fa-fw"></span></a>' +
        '<h3>{{ startDate | date: \'MMMM yyyy\' }}</h3>' +
        '</div>' +
        '</div>' +
        '<div class="header">' +
        '<div class="day-name" ng-repeat="dayName in dayNames">{{ dayName }}</div>' +
        '</div>' +
        '<div class="week" ng-repeat="week in weeks">' +
        '<div id="{{ day.id }}" class="day" ng-repeat="day in week track by day.id" ng-class="{ weekend: day.weekend }">' +
        '<span class="day-header">{{ day.date.getDate() }}</span>' +
        '</div>' +
        '</div>' +
        '</div>'
    }
});

例如：

注意：我的JavaScript不是很好，所以如果你知道一个更好的方法来编写它，那将是一个巨大的帮助。我知道有AngularUI日历，但我更喜欢自己写来学习

---

任何帮助都将不胜感激

你能再说点什么吗？html指令调用看起来如何相似？如何更改月份？在plnkr.co或jsfiddle.net中创建一个演示，以便其他人可以看到它并尽可能多地使用它changes@charlietfl我已经编辑了我的问题，以包含该问题的代码笔示例。谢谢你的帮助。那么我应该采取什么措施来了解呢problem@charlietfl对不起，我忘了提那部分。单击日历上的“下一步”和“上一步”按钮。适用于周末的课程应仅适用于周末。但是，当月份发生变化且突出显示的日期移到周中时，不会重新评估该类。另一个问题是没有使用ISO格式的新Id a日期更新日期单元格的Id。如果您使用的是Chrome浏览器，请使用Chrome开发工具检查day元素，并注意Id是否正确。谢谢。