管道/ Ajax插件智能表无法正常工作

Question

我刚从中获取了默认示例 https://lorenzofox3.github.io/smart-table-website/#section-pipe

但它不起作用，我从代码中复制了代码，并在代码中分配了app：ng-app =“myApp”，以及一个控制器：ng-controller =“pipeCtrl as mc”使其工作，控制台中没有显示错误

我还添加了一些console.log打印，以了解执行特定代码行的时间，然后在控制台中看到下一行：

  

推了它   ctr init

这是代码：

var app = angular.module('myApp', ['smart-table']);
app.controller('pipeCtrl', ['Resource', function (service) {
    var ctrl = this;
    console.log("ctr init");
    this.displayed = [];
    this.callServer = function callServer(tableState) {
        console.log("callserv");
        ctrl.isLoading = true;

        var pagination = tableState.pagination;

        var start = pagination.start || 0;     // This is NOT the page number, but the index of item in the list that you want to use to display the table.
        var number = pagination.number || 10;  // Number of entries showed per page.

        service.getPage(start, number, tableState).then(function (result) {
            console.log("getP");
            ctrl.displayed = result.data;
            tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update
            ctrl.isLoading = false;
        });
    };
}]);

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {
    var randomsItems = [];
    function createRandomItem(id) {
        var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
        return {
            id: id,
            name: heroes[Math.floor(Math.random() * 7)],
            age: Math.floor(Math.random() * 1000),
            saved: Math.floor(Math.random() * 10000)
        };

    }

    for (var i = 0; i < 1000; i++) {
        randomsItems.push(createRandomItem(i));
    }
    console.log("pushed it");

    //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
    //in our case, it actually performs the logic which would happened in the server
    function getPage(start, number, params) {

        var deferred = $q.defer();
        console.log("getting p svc");
        var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;

        if (params.sort.predicate) {
            filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
        }

        var result = filtered.slice(start, start + number);

        $timeout(function () {
            console.log("timeout");
            //note, the server passes the information about the data set size
            deferred.resolve({
                data: result,
                numberOfPages: Math.ceil(filtered.length / number)
            });
        }, 1500);


        return deferred.promise;
    }

    return {
        getPage: getPage
    };

}]);

在asp.net mvc中呈现的页面html：

@section scripts {
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/app1.js"></script>
    <script src="~/Scripts/smart-table.js"></script>
}

<div class="row" ng-app="myApp">
    <div class="col-md-12">
        <h2>Smart Ajax Data Tables</h2>
        <p ng-controller="pipeCtrl as mc">
            <table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
                <thead>
                    <tr>
                        <th st-sort="id">id</th>
                        <th st-sort="name">name</th>
                        <th st-sort="age">age</th>
                        <th st-sort="saved">saved people</th>
                    </tr>
                    <tr>
                        <th><input st-search="id" /></th>
                        <th><input st-search="name" /></th>
                        <th><input st-search="age" /></th>
                        <th><input st-search="saved" /></th>
                    </tr>
                </thead>
                <tbody ng-show="!mc.isLoading">
                    <tr ng-repeat="row in mc.displayed">
                        <td>{{row.id}}</td>
                        <td>{{row.name}}</td>
                        <td>{{row.age}}</td>
                        <td>{{row.saved}}</td>
                    </tr>
                </tbody>
                <tbody ng-show="mc.isLoading">
                    <tr>
                        <td colspan="4" class="text-center">Loading ... </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td class="text-center" st-pagination="" st-items-by-page="10" colspan="4"></td>
                    </tr>
                </tfoot>
            </table>
        </p>
    </div>
</div>