ng-repeat угловая директива не работает

Question

Я пытаюсь создать календарь, используя угловые директивы.

Я имею следующую директиву, которая работает отлично:

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

директива этого контроллер строит «неделю» массив каждого элемент, содержащий массив дней в течение каждой недели, делая то можно нг-повторить через неделю и дней, чтобы построить таблицу, отображающую дни месяца.

Все отлично работает с кодом приведенной ниже, но проблема в том, что, когда я пытаюсь заменить внутреннюю тд следующей угловой директивой:

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

А затем изменить директиву acMonth следующим образом к используйте директиву ac-day:

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

В этом втором случае ничего не отображается внутри элементов tr.

Любая идея о том, что может произойти?

Помощь !!!

Благодаря Ориоль

Answer 1

Попробуйте установить заменить = верно в коде директивы:

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

Answer 2

не должны быть transcludeng-transclude?

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

Answer 3

Моя проблема была связана с угловым добавлением элемента div вокруг шаблона директивы. Я считаю, что это нарушило схему таблицы, и браузер просто проигнорировал эту часть.

На данный момент я решил проблему, создав повторение, используя элемент td, а затем поместил свою директиву внутри элемента td.