javascript - Angular 更改 JSON 字符串

Question

我正在尝试使用 AngularJS、ASP.NET 和 JSON.NET 在屏幕上显示一些数据。当我调用 $.getJSON 时，它返回一个普通的 JSONArray，但是当我将数据放入 Angular Controller 内的 this.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 Controller 操作

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
                    });
}

AngularJS

(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

正如 Claies 评论和 Protector one 回答的那样，getJSON 调用是异步的，这样我就无法在页面加载之前填充 var 目录。

答案是在 Controller 内使用 $http.get 并使用变量来存储 Controller 的上下文，我已使用 var cont = this 完成了此操作>。然后我需要使用空数组初始化我的 directories 变量，以避免页面加载时出现错误。

然后，我只需将 success Promise 中的 data 分配给我的 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 one 的答案都帮助我自己找到了合适的答案。

如果有人有更好的答案，请随时发布，以便我将其标记为答案。