angularjs - 如何将一个范围的深拷贝到一个不跟踪原始范围变化的新范围中？

Question

我正在使用 Angular JS，我有两个范围

$scope.selected = {
    ids: []
};

$scope.copy = {
    ids: []
};

当我点击一个按钮时，我希望 $scope.copy 从 $scope.selected 中获取元素，所以我这样做了

<button ng-click="copy=selected">copy</button>

这部分有效，但现在每次我更改 selected 的值时，copy 的值也会更改。我也尝试过使用一个函数，但它没有解决我的问题。

$scope.copylist = function(selected) {
    $scope.copy.ids.push(selected.ids.valueOf());
}

当原始作用域的值更新时，我如何制作一个不更新的副本？

Answer 1

使用 angular.copy应该可以解决问题

<button ng-click="copyScope()">copy</button>

function copyScope () {
    $scope.copy = angular.copy($scope.selected);
}

代码解释

HTML

<div ng-app="myApp" ng-controller="myController">
    <button ng-click="copyOriginal()">copyOriginal</button>
    <button ng-click="touchOriginal()">touchOriginal</button>
    <pre> {{original}} </pre>
    <pre> {{copy}} </pre>
</div>

JS

$scope.original = [1, 2, 3];
$scope.copy = [];

$scope.touchOriginal = function () {
    $scope.original.push(4);
};

$scope.copyOriginal = function () {
    $scope.copy = angular.copy($scope.original);
    console.log($scope.copy);
}

$scope.$watch('copy', function (newCopy, oldCopy) {
    // Nothing should happen here when you trigger `touchOriginal()`
    console.log(newCopy, oldCopy);
});

JSFIDDLE