Angularjs 角度自定义指令中的动态模板（嵌套ng重复中）不工作

我是Angular/JS框架的新手，我尝试使用动态模板显示飞机座位数据，但它不起作用

我试着跟着导游走，但没有成功

这是我的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，它停止了工作。据我所知，我甚至没有进入链接器函数，尽管我正在输入指令

---

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

我会用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>

请查阅文档，了解显示/隐藏的具体工作原理，我可能会有它的背景词 但我以前用过，效果很好

---

这对任何阅读html的人来说都会更加清楚模板的作用

好的，我已经解决了这个问题。对我的代码的2个主要更改：

1具有自定义标记似乎会混淆ng重复渲染，因此将座椅项目作为属性解决了该问题

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

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

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

---

Angular没有足够的经验来了解最初错误的原因，但可能评论中有人可以解释。

谢谢你的评论，但我正试图尽可能地从我的视图中抽象出逻辑。不用担心，因为你有数据对象，你可以用已经存在的数据构建模板，除非您需要编辑/绑定

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