ng-repeat角指令不起作用。

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.

该控制器的指令构建了一个“周”数组，每个元素包含每周的天数数组，这样就可以在数周和数天内进行ng-repeat，以便构建显示每月天数的表。

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:

下面所示的代码可以正常工作，但问题是当我试图用下面的角指令替换内部td时:

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:

然后改变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'
    };
  });

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

在第二种情况下，tr元素中不显示任何内容。

Any idea of what might be happening?

你知道会发生什么吗?

Help !!!

帮助! ! !

Thanks Oriol

由于Oriol

3 个解决方案

#1

Try setting replace=true in your directive code:

在指令代码中尝试设置replace=true:

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

#2

Shouldn't transclude be ng-transclude?

不应该transclude ng-transclude吗?

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

#3

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.

我的问题与在指令模板周围添加div元素有关。我相信这打破了表格模式，而浏览器完全忽略了这一部分。

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

现在，我已经通过使用td元素创建repeat来解决这个问题，然后将我的指令放在td元素中。

#1