Преобразование Angular's $ scope в (Controller as) при использовании $ http

Question

Я использую Angular 1.3. Я изменил свой код, чтобы использовать Controller as, используя $ scope. У меня есть URL:

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 
    } 
] 

У меня также есть страница под названием индекс-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'); 
     }); 

}]); 

На моей странице I используйте следующие привязки:

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

Я знаю, что URL-адрес в $ http работает, потому что я попробовал его сам в браузере и скрипаче, и он вернул json. Но когда я использую его в своем угловом приложении, я получаю результат .error (который является предупреждением о FAIL.

Я попытался удалить http://localhost:3640 и просто использовать /api/v1/topics, когда я это сделаю, я не получаю результат ошибки больше. Я знаю, что мой контроллер работает и привязку к странице, потому что я вернусь 0 для dataCount.

Что я делаю неправильно в методе $http? является ли мой синтаксис не так?

Answer 1

ошибки в ваших нг -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, если успех.

Это нормально.

Ваша проблема, то приходит в ваш нг-повтора, когда вы говорите:

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

hic.data не существует. data был предметом, возвращенным с .success(function())$http.get. Затем вы берете data и назначаете его msg.replies. Таким образом, ваш ng-repeat="" должен выглядеть следующим образом:

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

Понимаете? Это основной материал ... Я, я имею в виду, вы должны чувствовать себя глупо.