Question

这是我的主要js文件：

 var app = angular.module('app', [
    'ngRoute'
]);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when("/calendar", {
            templateUrl: "views/calendar.html",
            controller: "calendarCtrl"

        })

}]);

app.controller("calendarCtrl", function($scope) {
    $scope.day = moment();
    console.log($scope.day);

});


app.directive("calendar", function() {
    return {
        restrict: "E",

        scope: {
            selected: "=",

        },
        link: function(scope) {
            console.log('test');
            scope.selected = _removeTime(scope.selected || moment());
            scope.month = scope.selected.clone();

            var start = scope.selected.clone();
            start.date(1);
            _removeTime(start.day(0));

            _buildMonth(scope, start, scope.month);

            scope.select = function(day) {
                scope.selected = day.date;  
            };

            scope.next = function() {
                var next = scope.month.clone();
                _removeTime(next.month(next.month()+1)).date(1);
                scope.month.month(scope.month.month()+1);
                _buildMonth(scope, next, scope.month);
            };

            scope.previous = function() {
                var previous = scope.month.clone();
                _removeTime(previous.month(previous.month()-1).date(1));
                scope.month.month(scope.month.month()-1);
                _buildMonth(scope, previous, scope.month);
            };

        }
    };

    function _removeTime(date) {
        return date.day(0).hour(0).minute(0).second(0).millisecond(0);
    }

    function _buildMonth(scope, start, month) {
        scope.weeks = [];
        var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
        while (!done) {
            scope.weeks.push({ days: _buildWeek(date.clone(), month) });
            date.add(1, "w");
            done = count++ > 2 && monthIndex !== date.month();
            monthIndex = date.month();
        }
    }

    function _buildWeek(date, month) {

        var days = [];
        for (var i = 0; i < 7; i++) {
            days.push({
                name: date.format("dd").substring(0, 1),
                number: date.date(),
                isCurrentMonth: date.month() === month.month(),
                isToday: date.isSame(new Date(), "day"),
                date: date
            });
            date = date.clone();
            date.add(1, "d");
        }
        return days;
    }
});

这是视图文件：

<calendar selected="day">
    <div class="header">
        <i class="fa fa-angle-left" ng-click="previous()"></i>
        <span>{{month.format("MMMM, YYYY")}}</span>
        <i class="fa fa-angle-right" ng-click="next()"></i>
    </div>
    <div class="week names">
        <span class="day">Sun</span>
        <span class="day">Mon</span>
        <span class="day">Tue</span>
        <span class="day">Wed</span>
        <span class="day">Thu</span>
        <span class="day">Fri</span>
        <span class="day">Sat</span>
    </div>
    <div class="week" ng-repeat="week in weeks">
        <span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected)  }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
    </div>
</calendar>

这是索引：

<body ng-app="app">
    <div ng-include="'templates/header.html'"></div>
    <div ng-view></div>
    <div ng-include="'templates/footer.html'"></div>
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="app/app.js"></script>
    <script type='text/javascript' src='js/utilities.min.js'></script>
    <script type='text/javascript' src='js/plugins.all.min.js'></script>
    <script type='text/javascript' src='js/main.js'></script>
</body>

</html>

我使用了来自https://www.codementor.io/angularjs/tutorial/angularjs-calendar-directives-less-cess-moment-font-awesome

的代码

我在angularjs中完成了菜鸟，但我需要帮助。此日历未显示。有人可以解释一下这里发生了什么吗？

Answer 1

@Claies 非常感谢你的回答。

我改变了路线：

.when("/calendar", {
            templateUrl: "views/test.html",
            controller: "calendarCtrl"

        })

test.html包含：

<calendar selected="day"></calendar>

和观点/日历：

<div class="header">
    <i class="fa fa-angle-left" ng-click="previous()"></i>
    <span>{{month.format("MMMM, YYYY")}}</span>
    <i class="fa fa-angle-right" ng-click="next()"></i>
</div>
<div class="week names">
    <span class="day">Sun</span>
    <span class="day">Mon</span>
    <span class="day">Tue</span>
    <span class="day">Wed</span>
    <span class="day">Thu</span>
    <span class="day">Fri</span>
    <span class="day">Sat</span>
</div>
<div class="week" ng-repeat="week in weeks">
    <span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
</div>

现在一切正常，＆lt; 3

AngularJS指令不起作用（我认为）

1 个答案: