Angularjs:拥有相同对象数据的2个不同作用域共享相同行为

Question

我正在angularJs中创建一个带复选框选项的嵌套树结构。

我的后端对象如下:

 {
"2": {
    "id": 2,
    "name": "Under Graduate",
    "slug": "under-graduate",
    "parent_id": 0,
    "level": 0,
    "path": "0",
    "show": false,
    "selected": false,
    "children": {
        "3": {
            "id": 3,
            "name": "B.Com",
            "slug": "b-com",
            "parent_id": 2,
            "level": 1,
            "path": "2",
            "show": false,
            "selected": false,
            "children": {
                "4": {
                    "id": 4,
                    "name": "Commerce",
                    "slug": "commerce",
                    "parent_id": 3,
                    "level": 2,
                    "path": "2/3",
                    "show": false,
                    "selected": false
                }
            }
        }
    }
}

}

我将相同的对象赋值给了两个不同名称的$scope变量

$scope.a = object;
$scope.b = object;

现在我在li元素中使用了ng-repeat和ng-include，如下所示

<li ng-repeat="a in a.children" ng-include="'a_tree_renderer.html'"></li>

对另一个变量(b)使用相同的方法

<li ng-repeat="b in b.children" ng-include="'b_tree_renderer.html'"></li>

在这两个模板中都有一个选项，用来展开和查看所有的子元素。

与树算法相关的一切都工作得很好，除了当我在一个模板上执行此操作时，例如b，不知何故模板(a)索引也会改变，即如果a从第二个模板展开选项，则在第一个模板上展开相同的选项，反之亦然。

Answer 1

通过赋值$scope.a = object;和$scope.b = object;, $scope.a和$scope.b都引用同一个对象。因此，修改其中一个会影响另一个。

如果你希望$scope.a和$scope.b是独立的，你可以创建对象的深层拷贝，这样每个作用域变量引用对象的不同拷贝，通过使用angular.copy。这样，当您更改$scope.a或$scope.b上的任何内容时，另一个将不会受到影响。