AngularJS directive not working (i think)

Question

Here is my main js file:

 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;
    }
});

Here is view file:


    
        
        {{month.format("MMMM, YYYY")}}
        
    
    
        Sun
        Mon
        Tue
        Wed
        Thu
        Fri
        Sat
    
    
        {{day.number}}

And here is index:

I used code from https://www.codementor.io/angularjs/tutorial/angularjs-calendar-directives-less-cess-moment-font-awesome

Im complete noob in angularjs, but i need help. This calendar is not showing. Can somebody please explain me what is happening here ?

Claies · Accepted Answer

The issue here is with the way that you structured your Directive. Angular Directives are self contained custom DOM elements, which manage their own HTML template and data functions.

when you declare the Directive in this manner:


  ....  //template code here

This won't actually work, because the template code inside this element doesn't belong to the calendar scope. It also is not self contained, nor re-usable.

You can declare the Directive in this manner:

app.directive("calendar", function() {
return {
    restrict: "E",
    template: " ... //template code here"
    ....

but this can be cumbersome when the template is more than a few HTML elements. In this case, however, the template does belong to the directive scope.

The best way to declare Directives with complex HTML is with the templateUrl option, as was demonstrated in the sample you attempted to replicate:

app.directive("calendar", function() {
    return {
        restrict: "E",
        templateUrl: "templates/calendar.html",
        ....

In this case, the HTML to display for the calendar is in it's own file, and re-using this directive in multiple projects is as simple as copying the JavaScript file that contains the directive, and the calendar.html to the new project. Everything is self contained, and it is in the correct scope.

AngularJS directive not working (i think)

Answers (2)

Related Questions