Question

以下代码应该使用$http-service从MySQL数据库中获取数据，但不知何故service提供的数据未显示给控制器/显示错误：/。如果我启动我的应用程序，我的页面会显示一个空表或错误表。

我在getUsers()函数中提供了一些抽样数据。提供数据的PHP代码正在运行，这是JSON PHP返回的示例。

也许你们可以帮助我解决这个问题。

var app = angular.module('DBapp', []);

app.controller('MainCtrl', function($scope, $http, DatabaseService) {
	
  $scope.userData = DatabaseService.getUsers();
	
});

app.factory('DatabaseService', function($http) {
	
	var srv = {};
	
	//Service Implementation
	
	srv.getUsers = function() {
      return [{"user_id":"1","firstname":"Barrack","lastname":"Obama","email":"obama@web.de"},      {"user_id":"2","firstname":"Tom","lastname":"Hanks","email":"tommy@web.de"},{"user_id":"6","firstname":"Felix","lastname":"Blume","email":"felix.b@selfmade.de"}];
	};
  
  
    //I provided some dummy-data in the getUsers-function as example output from the DB
  
	
	//Public API
	
	return {
		getUsers: function() {
			return srv.getUsers();
		}
		
	};
	
});

<!DOCTYPE html>
<html ng-app="DBapp">
<head>
<meta charset="ISO-8859-1">
<title>DB Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>

<body ng-controller="MainCtrl">
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div>
			
	  <div>
	    <div class="page-header">
		  <h1>Overview Database</h1>
	  </div>
	  					
	  <table style="font-size:20px; margin-left:10px;" class="table table-hover"">
		
	  <thead><tr><th>ID</th><th>Firstname</th><th>Secondname</th><th>Email</th></tr></thead>
		
	  <tbody>
		<tr ng-repeat="user in userData">
		     <td ng-bind="user.user_id"></td>
		     <td ng-bind="user.firstname"></td>
             <td ng-bind="user.lastname"></td>
             <td ng-bind="user.email"></td>
             <td>
               <a ng-href="#/database/{{ user.user_id }}/edit"><button type="button" class="btn btn-info"><span class="glyphicon glyphicon-wrench"></span>  Edit</button></a>
                                                                                                                      </td>
			          <td>                                                                                                      <a ng-href="#/database/{{ user.user_id }}/delete"><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>  Delete</button></a></td>
				
			</tr>
		</tbody>
	</table>
	
	<add-user-form></add-user-form>
</div>
				
			</div>
		</div>
	</div>

<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=lib/jquery/jquery-1.10.2.min.js></script>
<script src=lib/angular/angular.js></script>
<script src=lib/angular-route/angular-route.js></script>

<script src=scripts/app.js></script>
<script src=scripts/services/db_service.js></script>
<script src=scripts/controllers/main_controller.js></script>
<script src=scripts/directive/addUser_form.js></script>
<script src=scripts/controllers/delete_controller.js></script>
<script src=scripts/controllers/edit_controller.js></script>

</body>
</html>

如上所示，它适用于虚拟数据。但是，如果我将我的服务更改为以下代码（使用实际的$http-request），则无效...

所以问题是：

如何将我的数据从http请求传递到$scope中的MainCtrl？

app.factory('DatabaseService', function($http) {
	
	var srv = {};
	
	//Service Implementation
	
	srv.getUsers = function() {
		$http.post("php/getData.php").success(function(data) {
			return data;
		});
	};
	
	//Public API
	
	return {
		getUsers: function() {
			return srv.getUsers();
		}
		
	};
	
});

`

Answer 1

如果您只是从服务中返回数组，那么它可能会起作用，如

MenuItemCompat

您无法使用函数调用。

好的，第2部分：我没有机会测试它，但它应该可以工作。

return {
    getUsers: function() {
        return srv.getUsers;
    }
};

Jorg是对的，第2部分是仓促反应，对不起。返回promise是一个可能的解决方案，返回$ http.post（＆＃34; php / getDat.php＆＃34;），然后在你的控制器中添加成功函数

＆＃13;

app.factory('DatabaseService', function($http) {    
    var srv = {};

    //Service Implementation        
    $http.post("php/getData.php").success(function(data) {
            srv.users = data;
        });     

    //Public API        
    return {
        getUsers: function() {
            return srv.users;
        }
    };
});

＆＃13;

希望有所帮助

AngularJS $ http-Service的问题

1 个答案: