Angular 范围不打印变量

Question

我有一个 angular 工厂和控制器：

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

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

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

Answer 2

首先确保你有一个数组对象在

  $scope.widgets;

在您的控制器中。 你可以在你的控制器中打印这一行

console.log($scope.widgets);

查看数据是否可用。

Answer 3

您没有完全按照框架的预期兑现您的承诺。查看 $q docs for some explanation on promises. We also need to set our view model value (scope) to the correct returned value from the response object，由以下组成...

data – {string|Object} – The response body transformed with the

transform functions. status – {number} – HTTP status code of the

response. headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate

the request. statusText – {string} – HTTP status text of the response.

遵守以下...

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

此外，根据一些观察，无需像使用 WidgetFactory 那样命名工厂函数，匿名函数即可。您还可以利用 $http shortcut method get 等...

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

Angular 范围不打印变量

Angular Scope Not Printing Variables

javascript

ajax

angularjs

angularjs-service

angular-controller