我是AngularJS的新手，并尝试编写简单的POC应用程序，我正在尝试为用户加载消息，但即使控制器未加载，也无法调用$ http服务。控制台没有错误。我相信必须有更简单的方法来实现这种善意的建议。提前感谢我的文件以下帮助。
app.js文件
'use strict';
var nkApp = angular.module("nkApp", [ 'ui.router' ]);
nkApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider.state('site', {
'abstract' : true,
views : {
'navbar@' : {
templateUrl : 'app/components/navbar/partial-navbar.html'
},
'content@' : {
templateUrl : 'app/components/home/partials/partial-home.html',
controller : 'homeCntrl'
},
'footer@' : {
templateUrl : 'app/components/footer/partial-footer.html'
}
}
}).state('home', {
parent : 'site',
url : '/home',
views : {
'content@' : {
templateUrl : 'app/components/home/partials/partial-home.html',
controller : 'homeCntrl'
}
}
}).state('messagesByUsername', {
parent : 'site',
url : '/trading-api/messagesByUsername',
views : {
'content@' : {
templateUrl : 'app/entities/trading/messages/partials/partial-messages-by-username.html',
controller : 'messagesByUsernameCntrl'
}
}
}).state('messagesByUsername.list', {
parent : 'site',
url : '/trading-api/messagesByUsername/list',
Params : {
messages : null
},
views : {
'content@' : {
templateUrl : 'app/entities/trading/messages/partials/partial-messages-list-by-username.html',
controller : 'messagesListCntrl'
}
}
});
});
消息逐username.html
<div class="content">
<div ng-controller="messagesByUsernameCntrl">
<div class="jumbotron text-center">
<form class="form-horizontal" name="messagesFrm" novalidate>
<div class="form-group form-group-lg">
<div class="col-sm-10">
<input ng-model="username" class="form-control"
type="text" id="formGroupInputLarge" placeholder="User ID"></input>
</div>
<a ui-sref="messagesByUsername"
class="btn btn-primary btn-lg">GO</a>
</div>
</form>
</div>
<div ui-view></div>
</div>
</div>
消息逐用户名 - controller.js
'use strict';
angular.module("nkApp").controller(
'messagesByUsernameCntrl',
[
'$scope',
'$http',
'$state',
'$stateParams' ,
'messagesService',
function($scope, $http, $state, $stateParams, messagesService) {
$scope.username = "";
$scope.messages = [];
$scope.status = "";
$scope.pageSize = 12;
$scope.pageTitle = "Member Messages";
$scope.getMemberByUsername = function(data) {
console.log("Getting Messages For User : "
+ $scope.username);
messagesService.getMemberMessagesByUsername(
$scope.username).then(function(data) {
console.log("Messages : " + data);
$stateParams.messages = data;
}, function(response) {
console.log("Error Status : " + response.status);
$scope.status = response.status;
});
}
} ]);
消息列表逐username.html
<div class="content">
<h3>Messages List</h3>
<div ng-controller="messagesListCntrl">
<div ng-repeat="message in messagesList">
<div class="col-sm-10 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="page-header section-title">{{pageTitle}}
</div>
</div>
<div class="container content col-sm-2 col-lg-12">
<table class="row-border hover">
<thead>
<tr>
<th width="150px">Username</th>
<th width="150px">FirstName</th>
<th width="150px">LastName</th>
<th width="150px">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{member.username}}</td>
<td>{{member.firstName}}</td>
<td>{{member.lastName}}</td>
<td>{{member.email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
消息列表逐用户名 - controller.js
'use strict';
angular.module("nkApp").controller('messagesListCntrl',
[ '$scope', '$stateParams', function($scope, $stateParams) {
console.log("Params : " + $stateParams.messages);
$scope.messagesList = $stateParams.messages;
} ]);
的index.html
<!DOCTYPE html>
<html ng-app="nkApp">
<head>
<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet"
href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap-
theme.min.css">
<link href="/node_modules/font-awesome/css/font-awesome.min.css"
rel="stylesheet">
</head>
<body>
<div ui-view="navbar"></div>
<div class="container">
<div ui-view="content"></div>
</div>
<div ui-view="footer" class="footer"></div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/datatables/media/js/jquery.dataTables.min.js">
</script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/
release/angular-ui-router.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script src="/app/components/home/controller/home-controller.js"></script>
<script src="/app/entities/trading/messages/controller/
messages-by-username-controller.js"></script>
<script src="/app/entities/trading/messages/controller/messages-list-by-
username-controller.js"></script>
<script src="/app/entities/trading/messages/service/messages-service.js">
</script>
</body>
消息-service.js
'use strict';
angular.module('nkApp').factory('messagesService', [ '$http',
function($http) {
var service = {};
var response = {};
service.getMemberMessagesByUsername = function(username) {
console.log("Getting Messages For User : [" + username + "]");
response = $http.get("/trading-api/messages/" + username);
return response;
}
return service;
} ]);
答案 0 :(得分：0)
在您的服务中，添加
.then(function(response) {
return response.data})
到$http.get来电。或者将其更改为
return $http.get("/trading-api/messages/" + username)
.then(function(response) { return response.data})
'use strict';
angular.module('nkApp').factory('messagesService', messageService);
function messageService($http) {
function getMemberMessagesByUsername (username) {
return $http.get("/trading-api/messages/" + username).then(function(response) {
return response.data || null;
}, function(response) {
return {};
});
};
return {
getMemberMessagesByUsername:getMemberMessagesByUsername
};
};
......
messagesService.getMemberMessagesByUsername(paramYouPassHere).then(function(messages) {
$scope.messages = messages;
});
......