API から銀行トランザクションのリストを取得する親コンポーネント「transactionList」と、このリスト内のトランザクションごとに繰り返される子コンポーネント「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