Question

我有两个anglularjs的控制器文件和两个不同的服务文件。我可以在同一个html页面上调用两个不同的控制器，这样我就可以在同一页面上显示我的用户和用户数据。服务文件从中获取数据java file.two控制器文件：

1.usernamectrl.js  service:frontendservice.js   angularjs:java user.java
2.userexamctrl.js  service:userfrontendservice.js   angularjs   userexam.java
3.html page:myexam.html

我想在myexam页面上显示两个用户名和用户数据。

console image when i run code

<!-- language: userexamapp-js -->



        angular.module('userexamApp',[ 'editableTableWidgets', 'userfrontendservices',
                        'spring-security-csrf-token-interceptor' ])
                        .filter('excludeDeleted', function() {
                    return function(input) {
                        return _.filter(input, function(item) {
                            return item.deleted == undefined || !item.deleted;
                        });
                    }
                })

        .controller('userexamCtrl',['$scope','userexamservice','$timeout',
                        function($scope, userexamservice, $timeout) {


                            loaduserexamData();

                            function loaduserexamData() {
                                userexamservice.searchUserExambyId().then(
                                        function(userExams) {
                                            $scope.userexams = userExams.userExams;
                                            console.log($scope.userexams);

                                        })}; 




            } ]);                    














    <--service:userexamservice.js>  

            angular.module('userfrontendservices', [])
            .service('userexamservice',
                    [ '$http', '$q', function($http, $q) {
                        return {
                            searchUserExambyId : function() {
                                var deferred = $q.defer();

                            $http.get('/userexam/')
                            .then(function(response) {
                                if (response.status == 200) {
                                    deferred.resolve(response.data);
                                } else {
                                    deferred.reject('Error retrieving exam');
                                }
                            });

                            return deferred.promise;
                        },
                    };
                } ]);                                                                                                                                                                                                           



















<!-- language: myexam-html -->


  <b>       
        <!DOCTYPE html>
<html>


<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- BOOTSTRAP STYLES-->
<script src="/resources/js/ui/angular-route.min.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap.min.css">
<script src="/resources/js/ui/angular.js"></script>
<script src="/resources/js/ui/angular.min.js"></script>
<script type="text/javascript" src="/resources/js/ui/jquery-2.1.3.js"></script>
<script src="/resources/js/ui/jquery-1.11.3.min.js"></script>



</head>

<div id="myexam"></div>

<body>
    <header class="page-header pure-g not-ready"
        ng-class="{'app-ready': vm.appReady}">
        <div id="caloriesCounterApp" ng-controller="CaloriesTrackerCtrl">
        <div class="pure-u-lg-1-2 pure-u-1">
            <a class="pure-menu-heading" href="#"> <img class="logo"
                src="/resources/img/logo.png">
            </a> <span class="header-element page-title"><h2></h2></span>
        </div>

        <div class="pure-u-lg-1-2 pure-u-1 utilities ">
            <div class="header-element username">
                <div class="username-placeholder" ng-hide="vm.userName"></div>
                <span ng-cloak> welcome{{vm.userName}}</span>
            </div>
            <div class="header-element">
                <a class="logout" href="#" ng-click="logout()">Logout</a>
            </div>
        </div>
        </div>
    </header>
    <main class="container not-ready" ng-class="{'app-ready': vm.appReady}">

    <div class="row" style="margin: 5px;">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Userexams</div>
                <div class="panel-body"></div>
                <div id="userexamApp" ng-controller="userexamCtrl">
                <table cellpadding="0" cellspacing="0" border="0"
                    class="table table-striped table-bordered" id="exampleone">


                    <thead>
                        <tr>
                            <th>examname</th>
                            <th>examtype</th>
                            <th>outof</th>
                            <th>Markobtain</th>
                            <th>date</th>
                            <th>time</th>
                            <th>Result</th>
                            <th>Percentage</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="x in userexams">
                            <td>{{ x.examName }}</td>
                            <td>{{ x.examType }}</td>
                            <td>{{ x.outof }}</td>
                            <td>{{ x.marksObtain }}</td>
                            <td>{{ x.date }}</td>
                            <td>{{ x.time }}</td>
                            <td>{{ x.result }}</td>
                            <td>{{ x.percentage }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>

    </main>       
        <script type="text/javascript" data-main="/resources/js/userexam"
        src="/resources/bower_components/requirejs/require.js"></script>
 <script type="text/javascript" data-main="/resources/js/run-calories-tracker"
        src="/resources/bower_components/requirejs/require.js"></script>
            </body>
</html>


    </b>

Answer 1

非常简单，为了使用多个控制器，只需使用多个ngController指令，只要您的应用程序模块中有控制器可用：

<div class="one" ng-controller="firstController">
    <!-- -->
</div>

<div class="two" ng-controller="secondController">
    <!-- -->
</div>

如何使用angulajs在同一页面上调用不同的控制器

1 个答案: