CODEWITHSUNDEEP
angularjsangularjs-directive
osantos
osantos

Reputation: 414

ng-repeat an angular directive is not working

I am trying to build a calendar using angular directives.

I have the following directive that works perfectly:

   angular.module('acDaySelectCalendar',[])
  .directive('acMonth', function () {
    return {
      template: '<div class="monthcontainer"><table class="calendarmonth" width="210" border="0" align="center" cellpadding="0" cellspacing="0">\
          <tbody><tr>\
            <td class="mois" colspan="7">{{acDate | date:"MMMM yyyy"}}</td>\
            </tr>\
          <tr>\
            <td>D</td>\
            <td>L</td>\
            <td>M</td>\
            <td>W</td>\
            <td>J</td>\
            <td>V</td>\
            <td>S</td>\
          </tr>\
          <tr ng-repeat="week in weeks track by $index">\
            <td ng-repeat="day in week track by $index">{{day | date: "d"}}</td>\
          </tr>\
        </tbody></table></div>',
      restrict: 'E',
      scope:{
        acDate: '@'
      },
      controller: 'acMonthController'
    };
  });

this controller's directive builds a "weeks" array each element containing an array of days for each week, making it then possible to ng-repeat through weeks and days in order to build the table that displays the days of the month.

Everything works fine with the code shown below, but the problem is that when I try to replace the inner td by the following angular directive:

angular.module('acDaySelectCalendar')
  .directive('acDay',function() {
     return {
      template: '<td transclude></td>',
      restrict: 'E',
      transclude: true,
      //transclude:true,
      }
  });

And then changing the acMonth directive in the following way to use the ac-day directive:

   angular.module('acDaySelectCalendar',[])
  .directive('acMonth', function () {
    return {
      template: '<div class="monthcontainer"><table class="calendarmonth" width="210" border="0" align="center" cellpadding="0" cellspacing="0">\
          <tbody><tr>\
            <td class="mois" colspan="7">{{acDate | date:"MMMM yyyy"}}</td>\
            </tr>\
          <tr>\
            <td>D</td>\
            <td>L</td>\
            <td>M</td>\
            <td>W</td>\
            <td>J</td>\
            <td>V</td>\
            <td>S</td>\
          </tr>\
          <tr ng-repeat="week in weeks track by $index">\
            <ac-day ng-repeat="day in week track by $index">{{day | date: "d"}}</ac-day>\
          </tr>\
        </tbody></table></div>',
      restrict: 'E',
      scope:{
        acDate: '@'
      },
      controller: 'acMonthController'
    };
  });

In this second case nothing in displayed inside the tr elements.

Any idea of what might be happening?

Help !!!

Thanks Oriol

Upvotes: 2

Views: 2118

Answers (3)

osantos
osantos

Reputation: 414

My problem was related to angular adding a div element arround the directive template. I believe this broke the table schema and the browser simply ignored that part.

For now I have solved the issue by creating the repeat using the td element and then place my directive inside the td element.

Upvotes: 0

Nat
Nat

Reputation: 3717

Shouldn't transclude be ng-transclude?

angular.module('acDaySelectCalendar')
 .directive('acDay',function() {
 return {
  replace: true,
  template: '<td ng-transclude></td>',
  restrict: 'E',
  transclude: true,
  //transclude:true,
  }
 });

Upvotes: 1

JDTLH9
JDTLH9

Reputation: 1765

Try setting replace=true in your directive code:

angular.module('acDaySelectCalendar')
 .directive('acDay',function() {
 return {
  replace: true,
  template: '<td transclude></td>',
  restrict: 'E',
  transclude: true,
  //transclude:true,
  }
 });

Upvotes: 1

Related Questions