angulaire.js - Comment écrire un autre contrôleur ng dans la page de routage angulaire (veuillez venir jeter un oeil, le titre n'est pas clair)
Tout d'abord, créez une page index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <code><!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></code>
|
Créez ensuite une page de routage add.html
1 2 3 | <code><p class="row">
....
</p></code>
|
Puis mainApp.js, le js utilisé pour contrôler la distribution des routes et les modèles
1 2 3 4 5 6 7 8 9 10 11 | <code>var mainApp = angular.module('mainApp', [ 'ngRoute', 'ngResource' ]);
mainApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/add.do', {
templateUrl : 'insurance_add.html',
controller : 'InsuranceAddController'
});
} ]);
</code>
|
Créez ensuite InsuranceAddController.js pour gérer certains js ou autres de la page add.html
1 2 3 4 5 6 7 | <code>mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {
$scope.gotoList = function() {
...
};
}]);</code>
|
Ce que je veux réaliser, c'est écrire une pagination sur cette page, et ma compréhension est d'écrire un contrôleur sur cette page de routage,
1 2 3 4 5 6 | <code><p class="row">
<p ng-controller="PaginationDemoCtrl">
...
</p>
</p>
</code>
|
Ajoutez ensuite le code de contrôle de PaginationDemoCtrl dans InsuranceAddController.js
1 2 3 4 5 6 7 8 9 10 11 | <code>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) {
...
});</code>
|
Cependant, une erreur est signalée. Comment y parvenir ? (Question stupide d'un débutant, s'il vous plaît, soyez indulgents avec moi)
Ce qui suit est la DÉMO de pagination (je souhaite lancer la démo de pagination dans la page de routage add.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <code><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></code>
|
伊谢尔伦2871 Il y a quelques jours769 
