angular路由页面里怎么实现再写一个ng-controller(请进来看,标题说不明白)

首先,创建一个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>
<div id="wrapper">
    <div ng-view></div>
</div>
</body>
</html>

然后创建一个add.html路由页面

<div class="row">
    ....
</div>

然后是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,

<div class="row">
    <div ng-controller="PaginationDemoCtrl">
        ...
    </div>
</div>

然后再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这个路由页面)

<div ng-controller="PaginationDemoCtrl">
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true">
    </uib-pagination>
</div>
<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>
回复
阅读 6.1k
3 个回答

我可以准确的告诉你,这么使用controller是没有问题,出错说明你什么地方写错了,比如:在哪里定义的PaginationDemoCtrl?

还有,写个分页,干嘛要里面再套一个controller?

mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {

    $scope.gotoList = function() {
            ...
    };
 
}]);

这里面的mainApp是哪里来的?浏览器能正确识别吗?

新手上路,请多包涵

问下你的问题是怎么解决的?我也遇到了相似的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏