Угловые изменения JSON string

Question

Я пытаюсь показать некоторые данные на экране с помощью AngularJS, ASP.NET и JSON.NET. Когда я звоню $.getJSON, он возвращает обычный JSONArray, но когда я помещаю данные в это .variablename внутри моего углового контроллера, данные меняются, а Angular не отображает его на мой взгляд.

Модель

public class Directory 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public List<Note> Notes { get; set; } 
    public int ParentId { get; set; } 
    public List<int> DirectoryIds { get; set; } 

    public virtual Directory Parent { get; set; } 
    public virtual ICollection<Directory> Directories { get; set; } 
} 

действие контроллера .NET

public string GetDirectories() 
{ 
    var directories = db.Directories.Where(d => d.ParentId.Equals(0)).ToList(); 

    return JsonConvert.SerializeObject(new { directorylist = directories }, Formatting.Indented, 
        new JsonSerializerSettings 
        { 
         ReferenceLoopHandling = ReferenceLoopHandling.Ignore 
        }); 
} 

Угловое JS

(function() { 
    var app = angular.module('notes', []); 

    app.controller('DirectoryController', function() { 
     this.directories = directories; //Check output 1 
    }); 

    var directories = $.getJSON("/Directory/GetDirectories", function (data) { 
     return data; //Check output 2 
    }); 
})(); 

Выход 1 (увеличенное изображение http://i62.tinypic.com/2ppd0kg.png)

Выход 2

Answer 1

Как прокомментировал Клэйс, и ответ одного защитника, вызов getJSON был асинхронным, и таким образом я не мог заполнить var directories до загрузки моей страницы.

Ответ состоял в том, чтобы использовать контроллер $http.get и использовать переменную для хранения контекста контроллера, который я сделал с var cont = this. Затем мне нужно было инициализировать переменную directories с пустым массивом, чтобы избежать ошибок при загрузке страницы.

После этого я просто назначил data из-за успеха Promise в мою directories переменную.

(function() { 
    var app = angular.module('notes', []); 

    app.controller('DirectoryController', ['$http', function ($http) { 
     var cont = this; //Save the context 
     cont.directories = []; //Empty array to avoid errors on page load 

     $http.get('/Directory/GetDirectories'). 
      success(function (data, status, headers, config) { 
       //Save the async data to directories in the right context 
       cont.directories = data; 
      }). 
      error(function (data, status, headers, config) { 
      }); 
    }]); 
})(); 

Спасибо за помощь. И комментарий от @Claies, и ответ от @Protector помогли мне найти подходящий ответ.

Если у кого-то есть лучший ответ, не стесняйтесь публиковать его, поэтому я могу отметить его как ответ.

Answer 2

getJSON асинхронно извлекает данные, и на самом деле не вернуть его. Вы можете попытаться настроить контроллер в функции success параметра:

var directories = $.getJSON("/Directory/GetDirectories", null, function (data) { 
    app.controller('DirectoryController', function() { 
     this.directories = data; 
    }); 
}); 

Также отметим, что первый параметр getJSON является объектом данных, который посылается на сервер; в вашем примере вы предоставляете ему функцию javascript.