AngularJS将数据从控制器读取到表

Question

我只是尝试从balanceTableCtr中读出数据并将其显示在balanceTable中。但它只是向我展示了一张空桌子。

balanceTableCtr.js：

(function () {
'use strict';
angular.module('BlurAdmin.pages.dashboard')
.controller('BalanceTableCtrl', BalanceTableCtrl);
/** @ngInject */
function BalanceTableCtrl($scope) {
$scope.balanceTableData = [
{
image: 'app/browsers/chrome.svg',
algorithm: 'SHA-256',
name: 'Bitcoin',
price: '9843 $',
change: '12.6 %',
isChangeUp: true,
amount: '2.452 BTC'
}
];
}
})();

balanceTable.directive.js：

(function () {
'use strict';
angular.module('BlurAdmin.pages.dashboard')
.directive('balanceTable', balanceTable);
/** @ngInject */
function balanceTable() {
return {
restrict: 'E',
controller: 'BalanceTableCtrl',
templateUrl: 'app/pages/dashboard/balanceTable/balanceTable.html'
};
}
})();

平衡表.html：

<div class="horizontal-scroll">
<table class="table table-hover">
<thead>
<tr class="black-muted-bg">
<th class="align-right">Algorithm</th>
<th class="align-right">Name</th>
<th class="align-right">Price</th>
<th class="align-right">Change 24h</th>
<th class="align-right">Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in balanceTableData" class="no-top-border">
<td class="align-right">{{item.algorithm}}</td>
<td class="align-right">{{item.name}}</td>
<td class="align-right">{{item.price}}</td>
<td class="align-right">{{item.change}}</td>
<td class="align-right">{{item.amount}}</td>
</tr>
</tbody>
</table>
</div>

仪表板.html：

<div class="row">
<div class="col-lg-6 col-md-12">
<div ba-panel ba-panel-title="Hover Rows" ba-panel-class="with-scroll table-panel">
<div include-with-scope="app/pages/dashboard/balanceTable/balanceTable.html"></div>
</div>
</div>
</div>

我对 Angular 1 很陌生。但我在互联网上到处看，他们都是这样做的。为什么它不起作用？

Answer 1

检查这个 plunkr

<div class="row">
<div class="col-lg-6 col-md-12">
<div ba-panel ba-panel-title="Hover Rows" ba-panel-class="with-scroll table-panel">
<balance-table> </balance-table> 
</div>
</div>

Answer 2

非常感谢。 解决方案是我必须在tbody标签中添加ng控制器。

<tbody ng-controller="BalanceTableCtrl">
<tr ng-repeat="item in balanceTableData" class="no-top-border">
<td class="align-right">{{item.algorithm}}</td>
<td class="align-right">{{item.name}}</td>
<td class="align-right">{{item.price}}</td>
<td class="align-right">{{item.change}}</td>
<td class="align-right">{{item.amount}}</td>
</tr>
</tbod>