javascript - Angular 范围不打印变量

Question

我有一个 Angular 工厂和 Controller :

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

您没有完全按照框架的预期履行您的 promise 。查看$q docs有关 promise 的一些解释。我们还需要将 View 模型值(范围)设置为 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');
        }
    };
}]);