javascript - 我对这个 Angularjs ng-repeat 做错了什么？

Question

我现在已经尝试了几个小时，这应该很容易，但我不明白为什么我不能让它工作。

虚拟列表只是为了测试它是否应该工作并且确实有效。但是，当我连接服务器端数据源时，情况并非如此。 ajax调用返回的Json与虚拟列表中的Json相同。

我做错了什么？

这里是使用 dummylist 的工作示例的链接:http://plnkr.co/edit/6nBkdBpPVqQ2P8u2BEeY

服务器端是一个 .NET MVC 4 应用程序。

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

Answer 1

这里有一些问题。

1. $.ajax 是一个异步调用，它返回一个 promise ，而不是一个值。所以你的 getAllCurrency 方法正在返回一个 promise 。您真正需要做的是订阅该 Promise 的 success() 函数并等待从服务器返回值。 ...但是...
2. 不要使用 JQuery 在 Angular 应用程序中执行 AJAX。您几乎不需要这样做。请改用 $http。它将确保在 ajax 返回后触发摘要。
3. 如果您必须使用 JQuery 的 AJAX，则必须在更新范围后使用 $apply。

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