angular.js - angular路由頁面裡怎麼實作再寫一個ng-controller(請進來看,標題說不明白)
伊谢尔伦
伊谢尔伦 2017-05-15 17:02:41
0
2
743

首先,建立一個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>

然後建立一個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" 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伐。

全部回覆(2)
黄舟

我可以準確的告訴你,這麼使用controller是没有问题,出错说明你什么地方写错了,比如:在哪里定义的PaginationDemoCtrl?

還有,寫個分頁,幹嘛要裡面再套一個controller?

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

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

這裡面的mainApp是哪裡來的?瀏覽器能正確辨識嗎?

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板