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:

<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>

And here is index:

<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>

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 ?

You're going to need to narrow this down to a specific problem... there's too much code above to go thru. — tymeJV
– tymeJV, Commented Jul 14, 2015 at 18:53
problem is calendar part. not sure if its calendar directive, controller, maybe something else... everything is working perfectly, except this part. I put it here so you guys know everything :)) — Branko Dragovic
– Branko Dragovic, Commented Jul 14, 2015 at 18:55
please narrow this down to the specific problem...we don't need all your routing and non related controller code. Also no mention of errors thrown which is the first thing to look at — charlietfl
– charlietfl, Commented Jul 14, 2015 at 19:07

Claies · Accepted Answer · 2015-07-14 21:10:27Z

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:

<calendar selected="day"> .... //template code here </calendar>

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.

Branko Dragovic · Accepted Answer · 2015-07-14 21:36:11Z

@Claies thank you very much for answer.

I changed route to :

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

test.html contains:

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

And views/calender:

<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>

Everything is working fine now <3

Collectives™ on Stack Overflow

AngularJS directive not working (i think)

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related