我可以查询我的 api 调用，但我无法通过 angular 显示它答案

【问题标题】：I am able to query my api call, but i am not able to show it via angular我可以查询我的 api 调用，但我无法通过 angular 显示它
【发布时间】：2014-04-17 12:02:24
【问题描述】：

我制作了一个 JSON api。我喜欢用 angular.js 来查询这个。在我的网络服务器上，我看到请求进入，并返回状态 200，因此数据由 angular 调用。但是由于某种原因，我无法在屏幕上显示。

The url for the JSON is:  http://127.0.0.1:8000/food/myjson/

当我直接用 chrome 调用 url 时，我在屏幕上收到的输出是：

[{"persons": 4, "name": "Pasta Bolognese", "description": "Pasta met een saus op tomaten basis"}, {"persons": 2, "name": "Pasta Carbonara", "description": ""}, {"persons": 4, "name": "Pizzadeeg voor Big Green Egg", "description": ""}, {"persons": 2, "name": "Low and Slow Ribs", "description": ""}]

我的html：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
</script>

</head>

<body>
<div ng-app="myApp">
    <div ng-controller="UserCtrl">
        dish = {{ dish }}<br/>
    </div>
</div>
</body>

</html>

我的脚本：

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

myApp.controller('UserCtrl', ['$scope', '$http', function ($scope, $http) {


  $scope = {};

  $scope.dish = '';

  $http({
    method: 'GET',
    url: 'http://127.0.0.1:8000/food/myjson/'
  })
  .success(function (data, status, headers, config) {
    $scope.dish = data;
  })
  .error(function (data, status, headers, config) {
    // something went wrong :(
  });
}]);

我也尝试过对数据进行迭代，因为返回了一个数组。我已经这样做了：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
</script>

</head>

<body>
<div ng-app="myApp">
    <div ng-controller="UserCtrl">
        <div ng-repeat="x in dish">
            {{ x.name }}<br/>
        </div>
</div>
</body>

</html>

但也没有回应。但是每当我刷新屏幕时，json 调用就会完成。

我想我在这里遗漏了一些基本的东西，但我似乎无法弄清楚。任何帮助都会很棒！

也许有一种方法可以简单地将所有内容都放在屏幕上的范围内，用于调试目的？

【问题讨论】：

您是否尝试在成功回调函数中使用 console.log(data) 来检查您是否获得了预期的数据？
我现在试过了。但我认为尽管对 api 进行了调用，但数据是空的。我通过将 $scope.dish = '', 放入 scope.dish = [{{"name": "Pasta Carbonara"}}] 来检查它。当我这样做时，显示了预期的输出。所以由于某种原因，api调用完成了，但是输出没有放在范围内......
不要初始化你的 $scope 你不必这样做 $scope 被注入并通过 $injector 实例化它已经初始化了
尝试将 $http url 更改为 url: '/food/myjson'
如果 console.log(data) 显示数据为空，那么看起来从服务器获取数据时出现问题。您可以发布从服务器提供数据的代码吗？

标签： javascript angularjs angularjs-scope angularjs-ng-repeat angular-ui

【解决方案1】：

这是让你绊倒的线......

$scope = {};

通过这样做，您将覆盖正在注入控制器的对象，您可以随意添加它，但不要将其完全设置为新的东西。

删除后，您将希望使用包含的 ng-repeat 示例，因为返回的数据是一个数组，尽管在查看时您有一个未关闭的 div 标签，因此您将想再添加一个<\div>

【讨论】：

感谢您的意见。然而它并没有解决它。
在您的错误处理程序中设置 $scope 并将您的绑定更改为 {{dish|json}} 本周将您的对象输出为 json。