未知提供商:ngTableParamsProvider

时间:2016-06-18 22:14:42

标签: javascript html angularjs twitter-bootstrap

我正在构建一个分页表,我正在使用routeprovider。所以流程在主页用户上,当他点击旋转木马上的文本时,他会看到一个旋转木马,他被定向到一个名为queryBoard的新html页面,其中有一个表单提交一些细节,然后从后面取回数据并显示以表格格式,但当用户被重定向到queryBoard页面时,我不断收到错误

Unknown provider: ngTableParamsProvider

我已经包含了' ngTable'在我的模块中。

Main.js

angular.module('ui.bootstrap.demo', ['pageslide-directive', 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);

的index.html

    <html ng-app="ui.bootstrap.demo">

<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
    <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
    <script src="resources/js/main.js"></script>
    <script src="resources/js/CarouselController.js"></script>
    <script src="resources/js/dashboardrouter.js"></script>
    <script src="resources/js/TypeAheadController.js"></script>
    <script src="resources/js/angular-pageslide-directive.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-view></div>
</body>
</html>

welcome.html [向用户显示轮播并点击后将其路由到新页面]

    <h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
        <div>
            <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
                <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                    <img ng-src="/resources/images/cloud-home.jpg" style="height:305px; margin:auto;">
                    <div class="carousel-caption">
                        <a ng-click='sendEnvName(slide.text)'>
                            <h3 class="carousel-caption text-primary center-block">
                                {{slide.text}}</h3>
                        </a>
                    </div>
                </uib-slide>
            </uib-carousel>
            <a href="" style="background-color: #ac2925" ng-show="errorShow" ng-click="toggle()">There are exceptions during app initialization, click here to see details</a>
        </div>

Carousel.js [相关部分]

$scope.sendEnvName = function (gridName) {
    alert(gridName)
    $location.path("/queryBoard/"+gridName);
}

dashboardrouter.js

    angular.module('ui.bootstrap.demo').config(['$routeProvider', function($routeProvider) {
    $routeProvider.

    when('/welcome', {
        templateUrl: 'welcome.html',
        controller: 'CarouselDemoCtrl'
    }).

    when('/queryBoard/:gridName', {
        templateUrl: 'query/queryboard.html',
        controller: 'documentNameTypeAheadController',
    }).

    otherwise({
        redirectTo: '/welcome'
    });
}]);

TypeAheadCOntroller.js

angular.module('ui.bootstrap.demo').controller('documentNameTypeAheadController', function ($scope, $http, $filter, ngTableParams,
                                                                                            $uibModal, $timeout, $log, $window,
                                                                                             $routeParams) {

    alert($routeParams.gridName);


});

QueryBoard.html

<title>Query Board</title>

<script type="text/css">
    .app-modal-window .modal-dialog {
        width: 500px;
    }
</script>


<body>
<script type="text/html">
    <ul class="dropdown-menu" role="listbox">
        <li ng-repeat="match in matches track by $index"/>
    </ul>
</script>

<div class='container-fluid typeahead-demo' ng-controller="documentNameTypeAheadController">
    <h1>Query Board</h1>

    <form class="form-inline" role="form" ng-submit="submit()">
        <div class="form-group">
            <input type="text" placeholder="type-name" ng-model="selectedDocumentTypeName"
                   uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"
                   class="form-control">
        </div>
        <div class="form-group col-md-offset-1">
            <input type="text" placeholder="search criteria" class="form-control" ng-model="queryCriteria">
        </div>

        <button type="submit" class="btn btn-default col-md-offset-1">Submit</button>
        <div>
            <table ng-table="tableParams" show-filter="true" class="table">
                <thead>
                <tr>
                    <th ng-repeat="headerName in headerNames"
                        class="text-center sortable">
                        {{headerName}}
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="user in paginatedDetailedDataType">
                    <td ng-repeat="headerName in headerNames">
                        <div class="animate-switch" ng-if="headerName == spaceIdFieldName">
                            <a href="" ng-click="open(user[headerName])"> {{user[headerName]}} </a></div>
                        <div class="animate-switch" ng-if="headerName != spaceIdFieldName">{{user[headerName]}}</div>
                    </td>
                    <script type="text/ng-template" id="DetailedQueryView.html">
                        <div class="modal-header">
                            <h3>Detailed Query view for {{detailedTypeName}} spaceId {{detailedSpaceId}}</h3>
                        </div>
                        <div class="modal-body">
                            <table ng-table="tableParams" show-filter="true" class="table">
                                <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="property in detailedObjectProperties">
                                    <td>{{ property.key }}</td>
                                    <td>
                                        <div ng-show="property.disabled">{{property.value}}</div>
                                        <div ng-hide="property.disabled"><input type="text" ng-model="property.value"/>
                                        </div>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" ng-hide="updateEnabled" ng-click="edit()">Edit</button>
                            <button class="btn btn-primary" ng-show="updateEnabled" ng-click="save()">Save</button>
                            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                        </div>
                    </script>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>
</body>

我尝试在TypeAheadController中包含ngTable但是没有用,请你指导我哪里出错了

0 个答案:

没有答案