如何使用 angular.js $http 获得结果？答案

【问题标题】：How to get results with angular.js $http?如何使用 angular.js $http 获得结果？
【发布时间】：2015-08-28 15:51:40
【问题描述】：

我在使用 angularjs 从我的 api 服务器获取结果时遇到了一些问题。

这是我的代码：

home.html（查看）

<div class="jumbotron text-center">
        <h1>Home Page</h1>

        <p>{{ message }}</p>

        <a href="#" ng-click="getOrders()">Orders!</a>
</div>
<ul>
    <li ng-repeat="order in orders">{{order}}</li>
</ul>

main.js（控制器）

app.controller('mainController', function($scope, $http) {
    $scope.message = 'Everyone come and see how good I look!';
    $scope.orders = [];
    $scope.getOrders = function(){
        $http.get('http://apidemo.dev/api/orders').success(function(response){
            console.log("My data: " + response);
            $scope.orders = response;
        });
    }
});

当我单击按钮时，我可以在控制台中看到结果，但在列表中看不到。

如果在控制器中使用此代码，它会在加载时以及单击按钮时起作用：

app.controller('mainController', function($scope, $http) {
    $scope.message = 'Everyone come and see how good I look!';
    $http.get('http://apidemo.dev/api/orders').success(function(response){
        console.log("My data: " + response);
        $scope.orders = response;
    });
    $scope.getOrders = function(){
        $http.get('http://apidemo.dev/api/orders').success(function(response){
            console.log("My data: " + response);
            $scope.orders = response;
        });
    }
});

有什么问题？

谢谢！

【问题讨论】：

应该工作......你能发布response是什么吗？
.success 已弃用，然后使用。除此之外，您是否考虑过您的调用是异步的？
我通常会将 $scope.orders 初始化为 $scope.message 正下方的一个空数组，因为在这些情况下，有时似乎 Angular 会假设尚未在范围对象中声明的内容。值得一试，我猜？
我试过了：$scope.orders = [];低于 $scope.message 但它不起作用。
@Klian 你在用ng-route吗？好像你正在重定向到空白页面，而你有 href="#" 在里面

标签： angularjs routing anchor angularjs-routing

【解决方案1】：

似乎您使用的是ngRoute，并且您的锚点中有href="#"，这会导致您重定向到空白页面，保持href="" 将帮助您在css 中显示pointer: cursor; 在悬停时显示pointer: cursor;

按钮

<a href="" ng-click="getOrders()">Orders!</a>

【讨论】：

【解决方案2】：

感谢大家的帮助。

问题在于视图中的链接...

<a href="#" ng-click="getOrders()">Orders!</a>

应该是：

<a ng-click="getOrders()">Orders!</a>

【讨论】：