傳遞參考時Angularjs數據綁定？

有時，當兩個變量指向同一個變量，他們沒有這樣的結合在一起：傳遞參考時Angularjs數據綁定？

var option = 1; 
    $scope.a = option; 
    $scope.b = option;

當你改變$ scope.a，$ scope.b不會改變。看到這個Plunker

然而，有時它們是結合在一起的，例如，它發生在我身上的這樣一個模式：

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function($scope, $modal, $log) { 

    $scope.testDataArray = [{ 
    "name": "Doe" 
    }, { 
    "name": "Deer" 
    }, { 
    "name": "Female" 
    }]; 


    $scope.open = function(testData) { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
     data: function() { 
      return testData; 
     } 
     } 
    }); 

    modalInstance.result.then(function(selectedItem) { 
     $scope.scopeData = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
    }; 
}; 

// Please note that $modalInstance represents a modal window (instance) dependency. 
// It is not the same as the $modal service used above. 

var ModalInstanceCtrl = function($scope, $modalInstance, data) { 
    $scope.modalData1 = data; 
    $scope.modalData2 = data; 

    $scope.ok = function() { 
    $modalInstance.close($scope.modalData); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
};

見Plunker。這裏的「modalData1」和「modalData2」都是指「數據」。在這個Plunker的任何模態中，你改變了modalData1，然後modalData2隨之改變。

爲什麼這樣？

謝謝！

來源

2015-07-21 Tong

在第一種情況下，被分配的公共變量是一個整數，它是一個值類型。在第二種情況下，它是一個對象，它是一個引用類型。這意味着，在第一種情況下，您將值1賦值給兩個範圍變量，因此不存在彼此的鏈接，而在另一種情況下，您不復制數據對象，而是將引用分配給原始目的;因此當物體改變時，參考反映了這一點。 – GPicazo

我明白了。因此，當涉及到對象時，我總是需要使用angular.copy（）來剪切綁定？ – Tong

更新：
您應該複製元素，因爲由於javascript是通過引用傳遞的，所以這兩個變量（引用）實際上都指向同一個對象。如果你想刪除的副作用你必須分配之前複製對象：

$scope.modalData1 = angular.copy(data); 
$scope.modalData2 = angular.copy(data);

plunker

原來的答案：

在例子中，你所提供modalData2輸入與modalData1改變，因爲他們在NG-模型屬性分配相同的模式：

<div class="modal-body"> 
    modalData1: 
    <input ng-model="modalData1" /> 
    <br> 
    modalData2: 
    <input ng-model="modalData1" /> 
</div>

當我解決它，那麼他們是獨立的（plunker）：

<div class="modal-body"> 
    modalData1: 
    <input ng-model="modalData1" /> 
    <br> 
    modalData2: 
    <input ng-model="modalData2" /> 
</div>

然後，當你更新modalData1輸入，然後其他不會改變。

來源

2015-07-21 19:58:39 Keammoort

對不起，我沒有正確的例子....我已經更新它。 – Tong

謝謝！這使我很困惑 – Tong

它的因爲angularjs支持雙向綁定，當你使用由angularjs提供的指令的ng-model，並且由於你綁定了兩個輸入字段和相同的ng-model值，其他。

來源

2015-07-21 20:07:23

對不起，我沒有正確的例子....我已經更新了它。 – Tong

這很高興你能解決它！ –

簡單數據類型像數字1（VAR選項= 1：作爲整數處理）您使用的是複製默認。 對象或功能另一方面是通過引用，所以他們的內容似乎會綁定在一起。

來源

2015-07-21 20:37:59 matthiasgiger

傳遞參考時Angularjs數據綁定？

回答

相關問題