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'
    };
  }
})();

balanceTable.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>

dashboard.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 很陌生。但我在 Internet 上四处查看，他们都是这样做的。为什么它不起作用？

Answer 1

Check this 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-controller。

<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>