javascript - 将子级添加到 Angular UI Tree 上的任何父级会将其推送到每个父级

Question

我一直在尝试 Angular UI 树拖放操作，并遇到了一个困扰我的问题。正在从我的服务接收 json。当我的 Controller 收到它时，我必须使用空数组正确格式化它，以便它能够容纳子项:

格式:

function categorySuccessPost(data) {
    var emptyCategoryArray = {
        Categories: []
    }
    for (var i = 0; i < data.length; i++) {
        $.extend(data[i], emptyCategoryArray);
    }
     $scope.categoryData = data;
}

现在已格式化，如下所示:

[ { "CategoryId": 27054, "MerchantId": 5594, "ProductCategoryId": 1310,
"Name": "BulkUpload", "Description": "BulkUpload", "DateCreated": 
"/Date(1446793200000-0000)/", "IsActive": true, "IsDefault": false, "ItemCount":
 5, "ResponseStatus": { "ErrorCode": "SUCCESS" }, "TotalRecordCount": 15, 
"Categories": [] }, { "CategoryId": 23267, "MerchantId": 5594, 
"ProductCategoryId": 818, "Name": "Coupon", "Description": "Coupon", 
"DateCreated": "/Date(-62135596800000-0000)/", "IsActive": true, "IsDefault":
 true, "ItemCount": 1, "ResponseStatus": { "ErrorCode": "SUCCESS" }, 
"TotalRecordCount": 15, "Categories": [] } }

在尝试添加子项时，我尝试了两种不同的功能:

函数 1(使用模型值):

$scope.newSubItem = function (scope) {
        var currentCategoryData = scope.$modelValue;
        currentCategoryData.Categories.push({
            CategoryId: currentCategoryData.CategoryId * 10 + currentCategoryData.Categories.length,
            Name: currentCategoryData.Name + '.' + (currentCategoryData.Categories.length + 1),
            Categories: []
        });
    };

函数 2(使用数组中对象的索引，是的，我已确保传递了正确的索引):

$scope.newSubItem = function (index) {
        var array = $scope.categoryData;
        array[index].Categories.push({
            CategoryId: 12312,
            Name: 'test',
            Categories: []
        });
    };

问题是，它不是将新数据推送到所选索引，而是将 json 添加到每个 Categories :

[ { "CategoryId": 27054, "MerchantId": 5594, "ProductCategoryId": 1310, 
"Name": "BulkUpload", "Description": "BulkUpload", "DateCreated": 
"/Date(1446793200000-0000)/", "IsActive": true, "IsDefault": false, "ItemCount":
 5, "ResponseStatus": { "ErrorCode": "SUCCESS" }, "TotalRecordCount": 15, 
"Categories": [ { "CategoryId": 12312, "Name": "test", "Categories": [] } ] }, {
 "CategoryId": 23267, "MerchantId": 5594, "ProductCategoryId": 818, "Name": "Coupon", "Description": "Coupon", "DateCreated": "/Date(-62135596800000-
0000)/", "IsActive": true, "IsDefault": true, "ItemCount": 1, "ResponseStatus":
 { "ErrorCode": "SUCCESS" }, "TotalRecordCount": 15, "Categories": [ { 
"CategoryId": 12312, "Name": "test", "Categories": [] } ] }

我没有显示 HTML，因为它似乎不是问题。这是我将范围缩小到的地方，但仍然没有解释:

如果我使用通过 $.extend 方法的数据，那么它会向每个父级添加一个子级。但是，如果我复制格式化后生成的 json，将其放入对象中，然后从中读取，那么它只会像我想要的那样将一个子对象添加到所选的父对象中。但需要添加空数组。知道为什么会发生这种情况以及有什么解决方案吗？

编辑

还有一条可能很重要的信息:当我添加一个完整的类别(不同的功能)时，而不是添加一个子类别，然后尝试将一个子类别添加到新生成的类别中，那么它可以正常工作(仅添加一个子类别)到该类别):

$scope.addCategory = function () {
            var name = $scope.categoryName;
            // Temporary
            var categoryId = Math.floor((Math.random() * 50000) + 1)
            console.log(name, categoryId)
            $scope.categoryData.unshift({ CategoryId: categoryId, Name: name, Categories: [] })
            $scope.categoryName = "";
            $("#addCategoryModal").modal('hide');
            Notification.success({ message: 'Category Added Successfully!', delay: 3000 });
        }

Answer 1

我仍然不确定为什么会发生这种情况，但这是我解决问题的解决方案:

删除 $.extend for 循环和 $.extend 函数:

function categorySuccessPost(data) {
     $scope.categoryData = data;
}

添加项时，检查数组是否已初始化，如果没有，则在当前作用域中创建它:

$scope.newSubItem = function (scope) {
    var currentCategoryData = scope.$modelValue;
    if(currentCategoryData.Categories === 'undefined'){
        currentCategoryData.Categories = [];
    }
    currentCategoryData.Categories.push({
        CategoryId: currentCategoryData.CategoryId * 10 + currentCategoryData.Categories.length,
        Name: currentCategoryData.Name + '.' + (currentCategoryData.Categories.length + 1),
        Categories: []
    });
};

此方法的问题是您无法再将节点拖动到空父级中。