Angular 更改 JSON 字符串答案

【问题标题】：Angular changes JSON stringAngular 更改 JSON 字符串
【发布时间】：2015-04-14 18:25:20
【问题描述】：

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

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

Angular 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

【问题讨论】：

您可能会考虑切换到角度资源或角度$http.get()函数，而不是使用jquery函数；除此之外，两个框架都异步实现 get 函数，因此您应该将数据设置在成功函数中，而不是将其分配给函数本身。

标签： javascript asp.net asp.net-mvc angularjs json.net

【解决方案1】：

正如 Claies 评论和 Protector one 回答的那样，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 one 的回答都帮助我自己找到了合适的答案。

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

【讨论】：

【解决方案2】：

getJSON 异步检索数据，实际上并不返回它。您可以尝试在success 参数函数中设置您的控制器：

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

还要注意getJSON的第一个参数是发送给服务器的数据对象；在您的示例中，您为其提供了一个 javascript 函数。

【讨论】：