ng-repeat 角度指令不起作用答案

【问题标题】：ng-repeat an angular directive is not workingng-repeat 角度指令不起作用
【发布时间】：2015-05-18 20:52:44
【问题描述】：

我正在尝试使用角度指令构建日历。

我有以下完美运行的指令：

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

此控制器的指令为每个元素构建一个“weeks”数组，其中包含每周的天数数组，然后可以通过 ng-repeat 数周和天数来构建显示月份中的天数的表格。

下面显示的代码一切正常，但问题是当我尝试用以下角度指令替换内部 td 时：

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 元素内不会显示任何内容。

知道会发生什么吗？

求救！！！

谢谢黄鹂

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

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

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

【讨论】：

我没有尝试过你的答案，尽管从我读到的内容来看，这可能已经解决了。
我还没有尝试过，但从我阅读的内容来看，使用替换应该可以解决我的问题。另一方面，我读到 replace 已被弃用..你知道吗？

【解决方案2】：

transclude 不应该是ng-transclude吗？

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

【讨论】：

是的..这是一个错误，但对结果没有任何影响。

【解决方案3】：

我的问题与在指令模板周围添加 div 元素的角度有关。我相信这破坏了表架构，浏览器只是忽略了那部分。

现在我已经解决了这个问题，方法是使用 td 元素创建重复，然后将我的指令放在 td 元素中。

【讨论】：