角度范围不打印变量答案

【问题标题】：Angular Scope Not Printing Variables角度范围不打印变量
【发布时间】：2016-06-23 07:46:49
【问题描述】：

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

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 }} 等中没有填充任何内容。
我错过了什么？

【问题讨论】：

在你的控制器中打印 $scope.widgets 检查它是否包含数据
如果数据可用，您可以通过使用此行 console.log($scope.widgets); 查看您的数据或在浏览器中使用调试模式。
有可用数据。它是一个对象数组。但是对象属性没有出现在它们的{{ widget.name }} 中的ng-repeat 中。
这不是一个好习惯，但现在代替 $scope 使用 $rootScope 并尝试。
@VishalSingh 完全打破了它。

标签： javascript angularjs ajax angularjs-service angular-controller

【解决方案1】：

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

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

【讨论】：

所以我得到了相同的结果。但是当我 ng-repeat="widget in widgets" 并执行 {{ widget.name }} 时，我无法访问 widgets 内部的值
这似乎是最有帮助的答案，因为您需要解决一个承诺才能获得结果。无需调用$apply，因为我们完全处于 Angular 的上下文中，并且有问题的代码。 @gh0st 听起来您好像遗漏了一些小东西，是否存在影响 <li> 元素之一的 css 类或改变其可见性的东西？
另外，为了在上面的示例中冗长，也许将您的 var 分配给 data.data。这通常是回调的错误参数名称，您通常会看到 response.data，因为返回的对象上通常有一个 data 属性
@scniro $scope.widgets = data.data 成功了。谢谢你。终于有人知道他们在说什么了。如果您将评论作为答案发表，我会标记它。
@gh0st 为了完整起见，我发布了我的答案以及一些小建议

【解决方案2】：

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

  $scope.widgets;

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

console.log($scope.widgets);

查看数据是否可用。

【讨论】：

你能看到控制器中的数据吗？

【解决方案3】：

你并没有像框架所期望的那样完成你的承诺。查看$q docs 了解有关承诺的一些解释。我们还需要将我们的视图模型值（范围）设置为从the response object返回的正确值，由以下组成...

data – {string|Object} – 使用
转换的响应正文
转换函数。 status – {number} – 的 HTTP 状态代码

响应。 headers – {function([headerName])} – Header getter 函数。

config – {Object} – 用于生成的配置对象

请求。 statusText – {string} – 响应的 HTTP 状态文本。

请注意以下...

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');
        }
    };
}]);

【讨论】：