2015-12-10 3 views
0

Следующий код должен извлекать данные из базы данных MySQL с $http-service, но каким-то образом данные, которые предоставляются service, не попадают в контроллер/отображаются неверно: /. Если я запустил приложение, на моей странице будет отображаться пустая или неправильная таблица.

Я предоставил некоторые образцы в функции getUsers(). Код PHP, который предоставляет данные, работает, и это пример JSON возвратов PHP.

Возможно, вы, ребята, можете помочь мне исправить это.

var app = angular.module('DBapp', []); 
 

 
app.controller('MainCtrl', function($scope, $http, DatabaseService) { 
 
\t 
 
    $scope.userData = DatabaseService.getUsers(); 
 
\t 
 
}); 
 

 
app.factory('DatabaseService', function($http) { 
 
\t 
 
\t var srv = {}; 
 
\t 
 
\t //Service Implementation 
 
\t 
 
\t srv.getUsers = function() { 
 
     return [{"user_id":"1","firstname":"Barrack","lastname":"Obama","email":"[email protected]"},  {"user_id":"2","firstname":"Tom","lastname":"Hanks","email":"[email protected]"},{"user_id":"6","firstname":"Felix","lastname":"Blume","email":"[email protected]"}]; 
 
\t }; 
 
    
 
    
 
    //I provided some dummy-data in the getUsers-function as example output from the DB 
 
    
 
\t 
 
\t //Public API 
 
\t 
 
\t return { 
 
\t \t getUsers: function() { 
 
\t \t \t return srv.getUsers(); 
 
\t \t } 
 
\t \t 
 
\t }; 
 
\t 
 
});
<!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> 
 
\t \t \t 
 
\t <div> 
 
\t  <div class="page-header"> 
 
\t \t <h1>Overview Database</h1> 
 
\t </div> 
 
\t \t \t \t \t \t 
 
\t <table style="font-size:20px; margin-left:10px;" class="table table-hover""> 
 
\t \t 
 
\t <thead><tr><th>ID</th><th>Firstname</th><th>Secondname</th><th>Email</th></tr></thead> 
 
\t \t 
 
\t <tbody> 
 
\t \t <tr ng-repeat="user in userData"> 
 
\t \t  <td ng-bind="user.user_id"></td> 
 
\t \t  <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> 
 
\t \t \t   <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> 
 
\t \t \t \t 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
\t 
 
\t <add-user-form></add-user-form> 
 
</div> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </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) { 
 
\t 
 
\t var srv = {}; 
 
\t 
 
\t //Service Implementation 
 
\t 
 
\t srv.getUsers = function() { 
 
\t \t $http.post("php/getData.php").success(function(data) { 
 
\t \t \t return data; 
 
\t \t }); 
 
\t }; 
 
\t 
 
\t //Public API 
 
\t 
 
\t return { 
 
\t \t getUsers: function() { 
 
\t \t \t return srv.getUsers(); 
 
\t \t } 
 
\t \t 
 
\t }; 
 
\t 
 
});

`

+0

Я не вижу, где вы используете службу $ http ........! – Gianmarco

+0

'getUsers' тоже не является функцией, вы объявили ее как массив – Jorg

+0

@Jorg исправил это. Как вы можете видеть в первом фрагменте, он работает с фиктивными данными, но не с фактическим запросом – JohnDizzle

ответ

0

Это, вероятно, будет работать, если вы просто вернуть массив из вашей службы, как

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

вызов функции вы использовали не представляется возможным.

Хорошо, вот идет часть 2: У меня не было возможности проверить это, но оно должно работать.

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; 
     } 
    }; 
}); 

Йорг прав, эта часть 2 была поспешной реакцией, извините. Чтобы вернуть обещание является возможным решением, вернуть $ http.post ("PHP/getDat.php"), и чем в контроллере добавить функцию успеха

DatabaseService.getUsers().success(function(data) { 
 
    $scope.userData = data; 
 
    });

Надежда, что помогает

+0

Он работает с массивом, но мне нужно использовать $ http-request для получения данных из БД.Я предполагаю, что мой functin из второго фрагмента ошибочен каким-то образом – JohnDizzle

+0

использует функцию успеха вашего вызова $ http для передачи возвращаемых данных на какой-либо объект, например, вы сделали это непосредственно с массивом. И ваша служба должна вернуть этот объект. Ваша функция srv.getUsers вызывает вызов $ http и регистрирует обратный вызов успеха, но ничего не возвращает. –

+0

Можете ли вы представить несколько примеров кода для лучшего понимания? – JohnDizzle

Смежные вопросы