1

我有一个父组件“transactionList”，它从 API 获取银行交易列表，并为该列表中的每个交易重复一个子组件“transactionItem”。

我在刷新绑定到父组件控制器实例的事务列表时遇到了一个问题：数据记录在我的控制台中，但我的表是空的。请注意，该问题与子组件有关，因为注释代码工作正常。

家长：

.component('transactionList', {
  templateUrl: '/static/budget/transaction-list.html',
  controller: 'TransactionListController',
  bindings: {
  },
})

.controller('TransactionListController', ['Transaction', function(Transaction) {
  var ctrl = this;
  ctrl.loadTransactions = function() {
    ctrl.transactions = Transaction.query(function() {
      angular.forEach(ctrl.transactions, function(transaction) {
        transaction.selected = false;
      }); 
      console.log(ctrl.transactions);
    }); 
  };  
  ctrl.loadTransactions();
}])
<table class="table table-hover">
  <thead>
    <tr>
      <th>Date</th>
      <th>Category</th>
      <th>Amount</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="transaction in $ctrl.transactions">
      <!--
      <td>{{transaction.date}}</td>
      <td>{{transaction.category}}</td>
      <td>{{transaction.amount}}</td>
      <td>{{transaction.description}}</td>
      -->
      <transaction-item transaction="transaction"></transaction-item>
    </tr>
  </tbody>
</table>

孩子们：

.component('transactionItem', {
  templateUrl: '/static/budget/transaction-item.html',
  controller: 'TransactionItemController',
  bindings: {
    transaction: '=',
  },
})

.controller('TransactionItemController', function() {
  var ctrl = this;
  console.log(ctrl.transaction);
})
<td>{{$ctrl.transaction.date}}</td>
<td>{{$ctrl.transaction.category}}</td>
<td>{{$ctrl.transaction.amount}}</td>
<td>{{$ctrl.transaction.description}}</td>

编辑：

如果我将静态字符串放在子模板中，它将显示在表格之外。正如@JB Nizet 在评论中提到的那样，可能是因为违反了 DOM。如何在 AngularJS 中使用子组件管理表格行？

编辑2：

似乎我别无选择，只能使用指令作为属性来尊重 DOM。 https://github.com/angular/angular.js/issues/14466

4

0 回答 0