ng-repeat an angular directive is not working

Question

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

JDTLH9 · Accepted Answer · 2015-05-18 20:58:23Z

1

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

answered May 18, 2015 at 20:58

JDTLH9

1,7751 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

osantos Over a year ago

I have not tried your answer although from what I read this migh have fixed it.

osantos Over a year ago

I have not tried it but from what I have read using replace should have fixed my problem. On the other hand I have read that replace has been deprecated .. are you aware of this?

Nat · Accepted Answer · 2015-05-18 21:03:32Z

1

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

answered May 18, 2015 at 21:03

Nat

3,72723 silver badges22 bronze badges

1 Comment

osantos Over a year ago

Yes .. that was an error but did not really have any effect on the outcome.

osantos · Accepted Answer · 2015-05-20 21:17:39Z

0

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.

answered May 20, 2015 at 21:17

osantos

4144 silver badges19 bronze badges

Collectives™ on Stack Overflow

ng-repeat an angular directive is not working

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related