Question

我有一个父组件“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中的子组件管理表行？

EDIT2：

似乎我没有其他选择使用指令作为尊重DOM的属性。 https://github.com/angular/angular.js/issues/14466

AngularJS - 儿童组件绑定值未在ng-repeat

0 个答案: