0

나는 몇 시간 동안 이렇게 쉬운 일을해야했지만 왜 내가이 일을하지 못하는지 이해하지 못합니다.Angularjs ng-repeat에서 내가 뭘 잘못하고 있니?

더미 목록은 제대로 작동하는지 테스트하기위한 것입니다. 그러나 내 서버 측 데이터 소스에 연결할 때가 아닙니다. 아약스 호출로 반환 된 Json은 더미 목록에있는 호출과 동일합니다.

내가 뭘 잘못하고 있니? http://plnkr.co/edit/6nBkdBpPVqQ2P8u2BEeY

서버 측이 .NET MVC 4 응용 프로그램입니다 : 여기

은 dummylist 작업 예제 링크입니다.

HTML :

<div data-ng-controller="currencyController"> 
    <ul> 

     <li data-ng-repeat="currency in currencies"><span>{{ currency.CurrencyCode}} - </span><span>{{ currency.CurrencyName }}</span> 
    </li> 

    </ul> 
</div> 

JS :

var currencyTools = angular.module('currencyTools', []); 

currencyTools.controller('currencyController',function(currencyService,$scope) { 
    var path = 'currency/GetCurrencies'; 
    currencyService.getAllCurrencies(path, function (jsonResult) { 
     $scope.currencies = jsonResult.data; 
    }); 
    // $scope.currencies = dummyList(); //if i uncomment this it works 
}) 





currencyTools.factory('currencyService', function() { 
    var service = { 
     getAllCurrencies: function (path, callback) { 
      var result = $.ajax({ 
       url: path, 
       type: 'GET', 
       dataType: 'json', 
       data: '', 
       contentType: 'application/json; charset=utf-8', 
       success: function(json) { callback(json); } 
      }); 
      return result; 
     } 
    }; 
    return service; 
}); 


function dummyList() { 
    return [ 
    { "CurrencyCode": "BAM", "CurrencyName": "Bosnia-Herzegovina Convertible Mark" }, 
    { "CurrencyCode": "BBD", "CurrencyName": "Barbadian Dollar" }, 
    { "CurrencyCode": "BDT", "CurrencyName": "Bangladeshi Taka" }, 
    { "CurrencyCode": "BGN", "CurrencyName": "Bulgarian Lev" }, 
    { "CurrencyCode": "BHD", "CurrencyName": "Bahraini Dinar" }, 
    { "CurrencyCode": "BIF", "CurrencyName": "Burundian Franc" }, 
    { "CurrencyCode": "BMD", "CurrencyName": "Bermudan Dollar" }, 
    { "CurrencyCode": "BND", "CurrencyName": "Brunei Dollar" }, 
    { "CurrencyCode": "BOB", "CurrencyName": "Bolivian Boliviano" }, 
    { "CurrencyCode": "BRL", "CurrencyName": "Brazilian Real" }, 
    { "CurrencyCode": "BSD", "CurrencyName": "Bahamian Dollar" }, 
    { "CurrencyCode": "BTC", "CurrencyName": "Bitcoin" }]; 
} 
+0

나는 문제를 더 조사 제안했다. 자바 스크립트 디버거를 사용하여 함수의 여러 지점에서 값을 검사 해보십시오. 예를 들어, 성공 콜백에서'jsonResult.data'의 가치를 알고 싶을 것입니다. –

+0

정확히 무엇이 문제입니까? – remigio

답변

3

잘못 여기에가는 몇 가지가 있습니다.

  1. $.ajax은 값이 아닌 약속을 반환하는 비동기 호출입니다. 따라서 getAllCurrencies 메서드는 약속을 반환합니다. 당신이해야 할 일은 약속의 success() 함수를 구독하고 값이 서버에서 반환 될 때까지 기다리는 것입니다. ...하지만 ...
  2. 각도 응용 프로그램에서 AJAX를 수행하는 데 JQuery를 사용하지 마십시오. 거의 절대 그렇게 할 필요가 없습니다. 대신 $http을 사용하십시오. ajax가 반환 된 후에 다이제스트가 트리거되는지 확인합니다.
  3. 의 경우에 JQuery의 AJAX를 사용해야하는 경우 범위를 업데이트 한 후에 $apply을 사용해야합니다.

Here's an updated plunker with an example of doing it in a more "angular" way.

+1

설명 및 솔루션을 제공해 주셔서 감사합니다. 내 두뇌가 WTF #! #! 지금 몇 시간 동안 :) 그 $ http는 Angular를 처음 시도하면서 완전히 새로운 것이 었습니다. 건배! – Kimpo

관련 문제