Question

任何人都可以告诉我为什么我得到JS错误“错误：[$ injector：unpr]”使用此代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Table Example</title>

    <!-- Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
    <script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>

    <!--        <script src="js/app.js"></script>-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    <!-- Stylesheet -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.min.css" rel="stylesheet">

    <script type="text/javascript">
        var app = angular.module('app', ['ngRoute', 'ngTable']);

        /* Routing */
        app.config(['$routeProvider',
            function ($routeProvider) {
                $routeProvider.when('/', {templateUrl: 'welcome.html'});
                $routeProvider.when('/table/', {controller: 'TableCtrl', templateUrl: 'table.html'});
                $routeProvider.otherwise({redirectTo: '/'});
            }
        ]);

        /* Table controller */
        app.controller('TableCtrl', ['$scope', 'ngTableParams', function ($scope, ngTableParams) {
                var data = [{name: "Moroni", age: 50},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29}];

                $scope.tableParams = new ngTableParams({
                    page: 1, // show first page
                    count: 10 // count per page
                }, {
                    total: data.length, // length of data
                    getData: function ($defer, params) {
                        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });
            }]);
    </script>
</head>
<body ng-app="app">
    <a href="#/">Welcome</a>
    <a href="#/table">Table</a>

    <div ng-view="" class="container content"></div>
</body>

其中table.html是：

<h1>Events</h1>
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>

<table ng-table="tableParams" class="table">
   <tr ng-repeat="user in $data">
     <td data-title="'Name'">{{user.name}}</td>
     <td data-title="'Age'">{{user.age}}</td>
   </tr>
</table>

我已经在努力解决这个问题，但无法找到解决方案。其他人报告了同样的问题，但我找不到适合我的解决方案。

感谢您的帮助，最大

Answer 1

这是一个工作示例，可能解决您的问题

angular.module('app', ['ngRoute', 'ngTable'])

/* Routing */
.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.when('/', {
        template: '<div>Welcome</div>'
      });
      $routeProvider.when('/table/', {
        controller: 'TableCtrl',
        template: '<h1>Events</h1><p><strong>Page:</strong> {{tableParams.page()}}</p><p><strong>Count per page:</strong> {{tableParams.count()}}</p><table ng-table="tableParams" class="table"><tr ng-repeat="user in $data"><td data-title="Name">{{user.name}}</td><td data-title="Age">{{user.age}}</td></tr></table>'
      });
      $routeProvider.otherwise({
        redirectTo: '/'
      });
    }
  ])
.controller('TableCtrl', ['$scope', 'NgTableParams', function($scope, NgTableParams) {
  var data = [{
    name: "Moroni",
    age: 50
  }, {
    name: "Tiancum",
    age: 43
  }, {
    name: "Jacob",
    age: 27
  }, {
    name: "Nephi",
    age: 29
  }];

  $scope.tableParams = new NgTableParams({
    page: 1, // show first page
    count: 10 // count per page
  }, {
    total: data.length, // length of data
    getData: function($defer, params) {
      $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
  });
}]);

<body ng-app="app">
  <a href="#/">Welcome</a>
  <a href="#/table">Table</a>

  <div ng-view="" class="container content"></div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
    <script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>

Angular + ngRoute + ng-table无效

1 个答案: