问题描述
首先，创建一个index.html页面
<!doctype html><html ng-app='mainApp'><head> <meta charset='UTF-8'/> <title>Angular JS + Spring MVC test</title> <link rel='stylesheet' href='https://www.6hehe.com/wenda/resources/bootstrap/css/bootstrap.min.css' /> <script src='https://www.6hehe.com/wenda/resources/js/lib/angular/angular.js'></script> <script src='https://www.6hehe.com/wenda/resources/js/lib/angular/angular-resource.js'></script> <script src='https://www.6hehe.com/wenda/resources/js/lib/angular/angular-route.js'></script> <script src='https://www.6hehe.com/wenda/resources/js/mainApp.js'></script> <script src='https://www.6hehe.com/wenda/resources/js/InsuranceAddController.js'></script></head><body><p id='wrapper'> <p ng-view></p></p></body></html>
然后创建一个add.html路由页面
<p class='row'> ....</p>
然后是mainApp.js，用于控制路由分配和模板的js
var mainApp = angular.module(’mainApp’, [ ’ngRoute’, ’ngResource’ ]);mainApp.config([ ’$routeProvider’, function($routeProvider) { $routeProvider.when(’/add.do’, {templateUrl : ’insurance_add.html’,controller : ’InsuranceAddController’ });} ]);
然后创建InsuranceAddController.js用于处理add.html页面的一些js或其他
mainApp.controller(’InsuranceAddController’, [’$scope’, ’$location’, function($scope, $location) { $scope.gotoList = function() { ... }; }]);
我要实现的是在这个页面写一个分页，我的理解的在这个路由页面再写一个controller，
<p class='row'> <p ng-controller='PaginationDemoCtrl'>... </p></p>
然后再InsuranceAddController.js里添加用于控制PaginationDemoCtrl的代码
mainApp.controller(’InsuranceAddController’, [’$scope’, ’$location’, function($scope, $location) { $scope.gotoList = function() { ... }; }]);angular.module(’ui.bootstrap.demo’, [’ngAnimate’, ’ui.bootstrap’]);angular.module(’ui.bootstrap.demo’).controller(’PaginationDemoCtrl’, function ($scope, $log) { ...});
可是这样就报错了，请问这个怎么实现呢？（新手愚问，多多包涵）
以下是分页DEMO(我想把分页demo丢进add.html这个路由页面)
<p ng-controller='PaginationDemoCtrl'> <uib-pagination total-items='bigTotalItems' ng-model='bigCurrentPage' max-size='maxSize' boundary-link-numbers='true'> </uib-pagination></p><script> angular.module(’ui.bootstrap.demo’, [’ngAnimate’, ’ui.bootstrap’]);angular.module(’ui.bootstrap.demo’).controller(’PaginationDemoCtrl’, function ($scope, $log) {$scope.totalItems = 64;$scope.currentPage = 4;$scope.setPage = function (pageNo) { $scope.currentPage = pageNo;};$scope.pageChanged = function() { $log.log(’Page changed to: ’ + $scope.currentPage);}; $scope.maxSize = 5; $scope.bigTotalItems = 175; $scope.bigCurrentPage = 1; });</script>
问题解答
回答1：我可以准确的告诉你，这么使用controller是没有问题，出错说明你什么地方写错了，比如：在哪里定义的PaginationDemoCtrl?
还有，写个分页，干嘛要里面再套一个controller?
回答2：mainApp.controller(’InsuranceAddController’, [’$scope’, ’$location’, function($scope, $location) { $scope.gotoList = function() { ... }; }]);
这里面的mainApp是哪里来的？浏览器能正确识别吗？
