javascript - ng-table 教程的范围问题

Question

我正在尝试实现 ng-table 并遵循此处概述的基本步骤:http://ng-table.com/#/

我能够正确显示表格标题(带有过滤器的姓名/年龄)，但没有显示数据。

“数据”控制台日志返回适当的信息，但不会显示在表中。我怀疑我有一个范围问题，因为重命名变量允许我提取数据，但破坏了排序功能，通过查看其他问题，我了解到这是因为静态数据排序需要 $data 。

HTML 如下:

    <div id="manager-dashboard-alerts-page">
    <div class="main">
        <div class="title">
            <h1></h1>
            <h4></h4>
        </div>
<table ng-table="vm.tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            {{user.name}}</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
            {{user.age}}</td>
    </tr>
</table>

JS如下:

(function () {
"use strict";

angular
.module('roomchoice.manager-dashboard.alerts', [
  'ui.router',
  'ngTable'
])

.config(function config($stateProvider) {
  $stateProvider.state('manager.alerts', {
    url: '/alerts',
    views: {
      "main": {
        controller: 'AlertsController',
        controllerAs: 'alerts',
        templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
      }
    }
  });
})

.controller('AlertsController', AlertsController);

function AlertsController($scope, Restangular, NgTableParams) {
  var vm = this;
  var self = this;
  var data = [{name: "Moroni", age: 50} /*,*/];
  self.tableParams = new NgTableParams({}, { dataset: data});

Answer 1

您正在使用 controllerAs: 'alerts'，但在 HTML 中您引用的是 vm.tableParams。

将其更改为:

<table ng-table="alerts.tableParams" ...

还要确保您使用的是正确版本的 ngTable，演示使用 https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js

演示: http://plnkr.co/edit/z2SlqTl3BX5fXmh5orzV?p=preview