2016-01-15 63 views
-1

我有兩個控制器文件的anglularjs和兩個不同的服務文件each.how我可以調用兩個不同的控制器在同一個html頁面上,所以我可以顯示我的用戶和用戶數據在同一page.and服務文件從Java file.two控制器文件獲取數據:如何使用angulajs在同一頁上調用不同的控制器

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> 
+1

我編什麼我可以,請正確縮進你的代碼並更清楚地解釋你的問題。添加您收到的錯誤,以及您嘗試的操作。 – Idos

+0

也請閱讀如何創建一個MCVE - http://stackoverflow.com/help/mcve – Idos

回答

1

這是非常簡單的,爲了使用多個控制器,只需使用多個ngController指令,只要你有可用的控制器應用程序模塊:

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

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

嘗試不工作 – user3106364

+2

像「嘗試但不工作」的評論是非常非生產性的。該解決方案運行良好。如果你可能會向我們展示一些你得到的錯誤,或者只發布*相關的代碼段,我們可以進一步幫助你。 – Idos

+0

可以通過網絡瀏覽器控制檯映像幫助您解決我的問題。 – user3106364

相關問題