使用 $http 时将 Angular 的 $scope 转换为 (Controller as)答案

【问题标题】：Converting Angular's $scope to (Controller as) while using $http使用 $http 时将 Angular 的 $scope 转换为 (Controller as)
【发布时间】：2015-01-26 21:31:07
【问题描述】：

我正在使用 Angular 1.3 我已将代码更改为使用 Controller as，而不是使用 $scope。我有一个网址：

http://localhost:3640/api/v1/topics

得到以下 json：

[
  {
    topicId: 17,
    title: "This is another BRAND SPANKIN new topic",
    body: "This is a message in the body of another topic ftw!",
    created: "2014-11-27T05:37:49.993",
    replies = null
  },

  {
    topicId: 18,
    title: "This is another BRAND new topic",
    body: "This is a message in the body of a topic wow!",
    created: "2014-11-27T05:37:49.993",
    replies = null
  }
]

我还有一个名为 index-home.js 的页面

var app = angular.module("myApp", []);

app.controller("homeIndexController", ["$http", function ($http) {

    var msg = this;
    msg.dataCount = 0;
    msg.replies = [];

    $http.get("/api/v1/topics?includeReplies=true")
        .success(function(data) {
            //Success
            msg.replies = data;
        })
        .error(function() {
            //Error
            alert('error/failed');
        });

}]);

在我的页面上，我使用以下绑定：

<div id="ngController" ng-controller="homeIndexController as hic">
  ...
  <h3>Message count: {{hic.dataCount}}</h3>
  ...
  <div class="message row" data-ng-repeat="i in hic.data">
  <div class="title">{{i.title}}</div>
  <div class="date">{{i.created}}</div>
  <div class="contents">{{i.body}}</div>
</div>

我知道 $http 中的 url 可以正常工作，因为我在浏览器和 fiddler 中自己尝试了它，它返回了 json。但是当我在我的角度应用程序中使用它时，我得到了 .error 结果（这是一个警告说失败。

我尝试删除 http://localhost:3640 并在我这样做时只使用 /api/v1/topics，我不再得到错误结果。我知道我的控制器正在工作并绑定到页面，因为我得到了 dataCount 的 0。

我在$http 方法中做错了什么？我的语法错了吗？

【问题讨论】：

转到 chrome 的开发者工具，网络选项卡并查看请求是否从浏览器触发。如果是，请检查请求详细信息和响应流。
@MadhavanKumar 是的，调用已完成，json 在响应中返回。
感谢@MadhavanKumar 的帮助，你让我走上了一条坦率地说我在调试中不习惯的道路。检查 F12 工具以查看数据响应等。但问题实际上非常愚蠢。我要求ng-repeat="i in hic.data" 而不是ng-repeat="i in hic.replies" 显然是一个新手错误，但很难抓住，因为一个指向另一个。因此，如果不仔细查看代码，我的所作所为几乎是有道理的。这通常是 JavaScript 中的问题。我们没有编译器或类型来帮助我们，说嘿，白痴，你叫错了。

标签： json angularjs asp.net-mvc-5 http-get

【解决方案1】：

错误在您的 ng-repeat 属性中。您的范围内没有数据变量。将 hic.data 更改为 hic.replies 即可。

<div id="ngController" ng-controller="homeIndexController as hic">
  ...
  <h3>Message count: {{hic.dataCount}}</h3>
  ...
  <div class="message row" data-ng-repeat="i in hic.replies">
  <div class="title">{{i.title}}</div>
  <div class="date">{{i.created}}</div>
  <div class="contents">{{i.body}}</div>
</div>

【讨论】：

即使我在 12 分钟前自己回答了，我也会将你的答案标记为正确。大声笑
（上面的最后一条评论）。一切都很好，我宁愿给你一些分数，让你花时间弄清楚等等。而不是成为一个混蛋并将我自己的答案标记为正确。但我保证当我自己开始回答时没有答案。

【解决方案2】：

好吧伙计，这是一个真正的菜鸟错误，看看你的控制器：

app.controller("homeIndexController", ["$http", function ($http) {

    var msg = this;
    msg.dataCount = 2;
    msg.replies = [];

    $http.get("/api/v1/topics")
        .success(function(data) {
            //Success
            msg.replies = data;
        })
        .error(function() {
            //Error
            alert('eror/failed');
        });

}])

您将this 设置为msg，然后将msg.replies 设置为等于data（如果成功）。

没关系。

当你说：

<div data-ng-repeat="i in hic.data">

hic.data 不存在。 data 是从 $http.get 的 .success(function()) 返回的项目。然后你把data 分配给msg.replies。所以你的ng-repeat="" 应该是这样的：

<div data-ng-repeat="i in hic.replies">

明白吗？这是基本的东西......我，呃我的意思是你应该觉得很傻。

【讨论】：