javascript - 角度范围不打印变量

Question

我有一个角度工厂和控制器：

angular.module('myApp', ['ui.router', 'ngResource'])
.factory('Widget', ['$http', function WidgetFactory($http) {
    return {
        all: function() {
            return $http({method: "GET", url: "/widgets"});
        }
    };
}])
.controller('StoreCtrl', ['$scope', 'Widget', function($scope, Widget) {
    $scope.widgets = Widget.all();
}]);

在我的前端，我有

<div ng-controller="StoreCtrl">
    <li ng-repeat="widget in widgets">
        {{ widget.price }}
        {{ widget.name }}
    </li>
</div>

{{ widget.price }}但是我的等等中什么都没有填充。
我错过了什么？

Answer 1

您并没有像框架所期望的那样完全解决您的承诺。查看$q 文档以了解有关承诺的一些解释。我们还需要将我们的视图模型值（范围）设置为响应对象的正确返回值，由以下内容组成...

• data – {string|Object} – 用
• 变换函数。status - {number} - HTTP 状态码
• 回复。headers – {function([headerName])} – 标头获取函数。
• config - {Object} - 用于生成的配置对象
• 请求。statusText – {string} – 响应的 HTTP 状态文本。

观察以下...

Widget.all().then(function (response) {
    $scope.widgets = response.data;
});

此外，作为一些观察，没有必要像你一样命名你的工厂函数WidgetFactory，一个匿名函数就可以了。您还可以利用$http 快捷方式 get等...

.factory('Widget', ['$http', function($http) {
    return {
        all: function() {
            return $http.get('/widgets');
        }
    };
}]);

Answer 2

$http 返回一个承诺。当承诺解决时，您需要将响应数据分配给 $scope.widgets。在控制器中，试试这个：

Widget.all().then(function (data) {
    $scope.widgets = data;
});

Answer 3

首先确保您有一个 Array 对象

  $scope.widgets; 

在您的控制器中。 您可以在控制器中打印此行

console.log($scope.widgets);

查看数据是否可用。