Question

我一般是Angular / JS框架的新手，我正试图让这架飞机座位数据显示使用动态模板但不起作用。

我尝试按照this site的指南，但没有运气。

这是我的html，其中'row.seats'是一个对象文字，'row.rowLetter'是一个字符串：

<tr ng-repeat="row in rows">
  <seat-item ng-repeat="seat in row.seats" thisseat="seat" thisrow="row.rowLetter"></seat-item>
</tr>

这是我的指示：

angular.module('myApp.directives', []).directive('seatItem', function($compile) {
  var template1 = '<td> {{thisrow}} {{thisseat.price}} </td>',
      template2 = '<td> seat unavailable </td>';

  var getTemplate = function(thisseat) {
    if(thisseat.isAvailable) {  // is a boolean property on seat object
      return template1;
    }
    return template2;
  }

  var linker = function(scope, element, attrs) {
    element.html(getTemplate(scope.thisseat)).show();
    $compile(element.contents())(scope);  // not sure what contents refers to...
  }

  return {
    restrict: 'E',
    replace: true,
    link: linker,
    scope: {
      thisseat: '=',
      thisrow: '@'
    }
  }
}

我有一个我的控制器设置$ scope.rows但是当我试图在指令中移动所有这些逻辑时（我最初在我的视图中使用了ng-ifs）它停止了工作。据我所知，我甚至没有进入链接器功能（虽然我正在进入指令）。

任何帮助或资源链接将不胜感激！

Answer 1

我会使用ng-show ng-hide

示例：

<tr ng-repeat="row in rows">
    <seat-item ng-repeat="seat in row.seats" thisseat="seat" thisrow="row.rowLetter">
        <td ng-show='seat.isAvailable'> {{thisrow}} {{thisseat.price}} </td>
        <td ng-show='!seat.isAvailable'> seat unavailable </td>
    </seat-item>
</tr>

请参阅有关show / hide如何工作的文档，我可能会有它的后缀但我以前用过它们，效果很好

对于阅读你的html的人来说，这也会更清楚

Answer 2

好的，我能够解决问题。我的代码有两个主要变化：

1）拥有自定义标签似乎会混淆ng重复的渲染，因此使seat-item成为属性而不是修复问题。

<tr ng-repeat='row in rows'>
  <td seat-item ng-repeat='seat in row.seats' thisseat='seat' thisrow={{row.row}}>
</tr>

2）方法/属性.show（）和.html导致错误，而不是：

element.html(getTemplate(scope.thisseat)).show();

将链接器中的代码更改为：

element.append(getTemplate(scope.thisseat));

对于Angular来说，没有经验足以知道导致初始错误的原因，但评论中的某些人可能会解释。

Angular自定义指令（在嵌套的ng-repeats中）中的动态模板不起作用

2 个答案: