AngularJS从控制器读取数据到表格失败：表格为空问题排查

嘿，我看你遇到了控制器里的数据没法渲染到balanceTable表格的问题，别着急，咱们一步步拆解可能的原因，逐个排查：

1. 先检查HTML模板的绑定是否准确 #

这是最常见的问题，一定要确保模板和控制器里的变量完全对应：

• 首先确认表格的ng-repeat指令是不是正确指向了balanceTableData，变量名拼写不能有任何差错（比如别写成balanceTableDatas多了个s）。
• 给你一个正确的模板示例参考：

  <table class="balanceTable">
    <thead>
      <tr>
        <th>币种名称</th>
        <th>价格</th>
        <th>涨跌幅</th>
      </tr>
    </thead>
    <tbody>
      <!-- 用track by $index避免无唯一ID时的渲染问题 -->
      <tr ng-repeat="coin in balanceTableData track by $index">
        <td>{{ coin.name }}</td>
        <td>{{ coin.price }}</td>
        <td class="{{ coin.isChangeUp ? 'text-green' : 'text-red' }}">{{ coin.change }}</td>
      </tr>
    </tbody>
  </table>
  

• 另外，如果你用了controllerAs语法（比如路由里配置了controllerAs: 'vm'），那模板里要改成coin in vm.balanceTableData，不能直接用balanceTableData。

2. 确认控制器和视图的关联是否生效 #

• 如果你是在HTML里直接用控制器，要确保加了ng-controller="BalanceTableCtrl"指令，比如：

  <div ng-controller="BalanceTableCtrl">
    <!-- 表格放在这里 -->
  </div>
  

• 如果是通过路由关联控制器，检查路由配置里的controller字段是不是正确写了BalanceTableCtrl：

  angular.module('BlurAdmin.pages.dashboard')
    .config(function($stateProvider) {
      $stateProvider.state('dashboard.balance', {
        url: '/balance',
        templateUrl: 'app/pages/dashboard/balance-table.html',
        controller: 'BalanceTableCtrl',
        // 如果用controllerAs的话要加上这行
        // controllerAs: 'vm'
      });
    });
  

3. 验证数据是否正确初始化 #

• 先检查你代码里的balanceTableData数组有没有正确闭合，比如你代码里的...是不是代表省略了其他数据项？要确保数组语法完全正确，比如：

  $scope.balanceTableData = [
    { 
      image: 'app/browsers/chrome.svg', 
      algorithm: 'SHA-256', 
      name: 'Bitcoin', 
      price: '9843 $', 
      change: '12.6 %', 
      isChangeUp: true, 
      amount: '2.452 BTC' 
    },
    // 其他数据项要加逗号分隔，最后一项可以不加
    { 
      image: 'app/browsers/firefox.svg', 
      algorithm: 'Ethash', 
      name: 'Ethereum', 
      price: '1520 $', 
      change: '-3.2 %', 
      isChangeUp: false, 
      amount: '12.78 ETH' 
    }
  ]; // 这里的闭合括号不能少！
  

• 可以在控制器里加一行console.log($scope.balanceTableData)，打开浏览器控制台看看数据是不是真的存在：
  • 如果控制台能看到完整的数组，那问题肯定在模板绑定上；
  • 如果控制台看不到数据，那就是数据初始化有语法错误，或者控制器根本没被执行。

4. 检查模块依赖是否正确 #

确认BlurAdmin.pages.dashboard模块已经被主模块依赖了，比如主模块的定义：

angular.module('BlurAdmin', [
  'BlurAdmin.pages.dashboard',
  // 其他需要的依赖模块
]);

如果模块没被正确引入，控制器不会被加载，自然没法绑定数据。

5. 排查作用域继承问题 #

如果你的表格嵌套在ng-if、ng-switch或者另一个控制器内部，可能会遇到作用域继承的坑。这时候可以换两种方式规避：

• 改用controllerAs语法，把数据挂在控制器实例上，避免原型继承的影响；
• 把数据放在一个对象容器里，比如$scope.tableData = { balanceTableData: [...] }，然后模板里绑定tableData.balanceTableData，这样可以避免子作用域覆盖父作用域变量的问题。

按照上面的步骤一步步排查，应该能很快找到表格为空的原因！

内容的提问来源于stack exchange，提问作者BlockchainProgrammer