Question

我正在使用Angular 1.3我已经使用$ scope更改了我的代码以使用Controller as。我有一个网址：

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方法中做错了什么？我的语法错了吗？

Answer 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>

Answer 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。

这没关系。

当你说：

时，你的问题会出现在ng-repeat中

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

hic.data不存在。 data是从.success(function())的{{1}}返回的项目。然后，您取出$http.get并将其分配给data。所以你的msg.replies应该是这样的：

ng-repeat=""

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

使用$ http时将Angular的$ scope转换为（Controller as）

2 个答案: