Question

在理解如何混合AngularJS和PHP时遇到一些麻烦。我最初只是想让一个AngularJS工厂调用一个PHP文件（它抓取一个查询），然后将它推回到我的AngularJS工厂，在那里Controller可以使用这些数据。

这是我到目前为止所做的，这给了我＆＃34; undefined＆＃34;当我尝试console.log结果时。

厂

app.factory("PlantServiceLIVE", function($http) {
  var mData = {};
  $http.get('pages/getplants.php').success(function(data) {
    mData.data = data;
  });
  return mData;
});

控制器

app.controller('TestController', function($scope, $http, PlantServiceLIVE) {
  $scope.Plants = PlantServiceLIVE.mData;
  console.log(JSON.parse($scope.Plants));
});

PHP（刚刚验证了以下工作原理）

$sql = "SELECT * FROM PlantTable";
$result = $conn->query($sql);
echo json_encode($result);

不确定我到底做错了什么，第一次这样做。

我得到的唯一开发者控制台错误是SyntaxError: Unexpected token u，根据我的阅读，这意味着数据为undefined。

Answer 1

问题不在于角度，而在于Ajax请求的工作方式。

AJAX请求异步工作，这意味着响应不会立即可用。您需要做的是准备好代码，以便在响应准备好时通知您。在vanilla javascript中，您将使用回调来获得通知，角度使用promises

要使其正常工作，您需要稍微更改一下代码。工厂

app.factory("PlantServiceLIVE", function($http) {
  var mData = {
    gettingPlants: function(){
      return $http.get('pages/getplants.php')
    }
  };

  return mData;
});

控制器

app.controller('TestController', function($scope, $http, PlantServiceLIVE) {
  PlantServiceLIVE.gettingPlants.then(function(response){
    console.log(JSON.parse(response.data));
  });

});

Answer 2

我认为主要的问题是你实际上并没有调用$ http.get（），你只是定义它。另外，你应该阅读更多关于Angular中异步调用的内容（它们真的很痛苦，但是在你掌握了它们之后它们会非常酷）。

这让我开始了：http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/（只是确保你远离他们的官方文档;这是一个真正的混乱，要么过于复杂，要么过度简化）。

无论如何，对于你的问题：

在你的工厂试试这个：

app.factory("PlantServiceLIVE", function($http) {
  var mData = {
        get_data : function(){
            return $http.get('pages/getplants.php').success(function(data) {
                     return mData.data = data;
                   });
        }
      };

  return mData;
});

然后在您的控制器中获取数据（在您收到之后），如下所示：

app.controller('TestController', function($scope, $http, PlantServiceLIVE) {
  $scope.click_me = function(){
    var wait = PlantServiceLIVE.mData();
    wait.then(function(data){
      console.log(data); //you should have your data here.
      $scope.Plants = data;
    });
  }
});

然后用

进行触摸

<button ng-click="click_me()">Gimme plants</button>

AngularJS Factory调用PHP然后返回AngularJS

2 个答案: