AngularJS создает новую область из области видимости

Question

Я не очень понимаю, почему этот кусок кода работает так, как он работает.

Я звоню в мою службу и получаю ожидаемые данные. Я хочу хранить картинки отдельно, так как мне нужно изменить массив и разобрать его по-разному для новых областей. Вещь, которую я не понимаю, состоит в том, что, поскольку я сейчас создал 2 области видимости, product и productPictures - почему они все еще связаны?

Если я использую Lodash для _.sort() productPictures, тогда объект Images внутри scope.Product также будет изменен, однако я не хочу, чтобы это произошло, и я не знаю, как изолировать $ scope.productPictures. Я пытался обрабатывать области видимости как простые переменные js, такие как var product; и var productPictures, но, поскольку я устанавливаю их данные в соответствии с ответом службы, они все еще связаны.

$api.productpage.query({
    id: parseInt($stateParams.productId)
}, function (data) {
    $scope.product = data[0];

    $scope.productPictures = data[0]['Images'];
});

Я пропускаю что-то супер тривиальное? Стоит ли мне управлять изображениями продуктов в отдельном запросе на обслуживание?

Answer 1

Объекты передаются по ссылке в javascript. Это означает, что в этом коде

$scope.product = data[0];
$scope.productPictures = data[0]['Images'];

$scope.productPictures указывает на тот же объект (я думаю, это массив в вашем случае), как data[0].Images,

Чтобы преодолеть эту проблему, вам нужно клонировать объект, а не просто ссылку. Вы можете проверить angular.copy метод:

$scope.productPictures = angular.copy(data[0].Images);

Answer 2

Вы создаете две переменные в области видимости, а не две области видимости.

Объект передается по ссылке, поэтому, если вы измените один, он будет модифицировать другой. Может быть, попытаться клонировать объект

редактировать использовать angular.copy() вместо jquery.extend()

function myclone ( obj){
   return jQuery.extend(true, {}, obj);  
}