1

一般来说，我是 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）它停止工作。据我所知，我什至没有进入链接器函数（尽管我正在输入指令）。

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

4

2 回答 2

0

好的，我能够解决问题。我的代码的 2 个主要更改：

1) 有一个自定义标签似乎会混淆 ng-repeated 渲染，因此将 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 经验，不知道是什么导致了最初的错误，但也许评论中的人可以解释一下。

于 2014-02-13T18:14:48.470 回答
0

我会使用 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的任何人来说，这也将更清楚模板的作用

于 2014-02-13T14:50:27.537 回答