我有兩個控制器文件的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頁面上。
<!-- 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>
我編什麼我可以,請正確縮進你的代碼並更清楚地解釋你的問題。添加您收到的錯誤,以及您嘗試的操作。 – Idos
也請閱讀如何創建一個MCVE - http://stackoverflow.com/help/mcve – Idos