Question

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

我有以下完美的指令：

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

这个控制器的指令构建了一个＆＃34;周＆＃34;数组每个元素包含每周的天数数组，然后可以在几周和几天内重复ng，以构建显示月中日期的表格。

下面显示的代码一切正常，但问题是当我尝试用以下angular指令替换内部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元素中没有显示任何内容。

对可能发生的事情有所了解？

帮助!!!

由于奥里奥尔

Answer 1

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

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

Answer 2

不应该transclude是ng-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元素创建repeat来解决了这个问题，然后将我的指令放在td元素中。

ng-repeat一个角度指令不起作用

3 个答案: