首先,創(chuàng)建一個index.html頁面
<!doctype html>
<html ng-app="mainApp">
<head>
<meta charset="UTF-8"/>
<title>Angular JS + Spring MVC test</title>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" />
<script src="resources/js/lib/angular/angular.js"></script>
<script src="resources/js/lib/angular/angular-resource.js"></script>
<script src="resources/js/lib/angular/angular-route.js"></script>
<script src="resources/js/mainApp.js"></script>
<script src="resources/js/InsuranceAddController.js"></script>
</head>
<body>
<p id="wrapper">
<p ng-view></p>
</p>
</body>
</html>
然后創(chuàng)建一個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'
});
} ]);
然后創(chuàng)建InsuranceAddController.js用于處理add.html頁面的一些js或其他
mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {
$scope.gotoList = function() {
...
};
}]);
我要實現(xiàn)的是在這個頁面寫一個分頁,我的理解的在這個路由頁面再寫一個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) {
...
});
可是這樣就報錯了,請問這個怎么實現(xiàn)呢?(新手愚問,多多包涵)
以下是分頁DEMO(我想把分頁demo丟進add.html這個路由頁面)
<p ng-controller="PaginationDemoCtrl">
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" 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>
小伙看你根骨奇佳,潛力無限,來學PHP伐。
我可以準確的告訴你,這么使用controller
是沒有問題,出錯說明你什么地方寫錯了,比如:在哪里定義的PaginationDemoCtrl
?
還有,寫個分頁,干嘛要里面再套一個controller
?
mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {
$scope.gotoList = function() {
...
};
}]);
這里面的mainApp是哪里來的?瀏覽器能正確識別嗎?