传递引用时的Angularjs数据绑定？

有时，当两个变量引用同一个变量时，它们不会像这样绑定在一起：

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

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');
  };
};

更改$scope.a时，$scope.b不会更改。看到这个了吗

然而，有时它们是绑定在一起的，例如，在我身上发生这样的模态：

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

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');
  };
};

看。 这里的“modalData1”和“modalData2”都是指“数据”。 在这个Plunker的任何模式中，您更改modalData1，然后modalData2随之更改

为什么会这样

谢谢大家!

更新：
您应该复制元素，因为javascript是通过引用传递的，所以这两个变量（引用）实际上都指向同一个对象。如果要删除该副作用，必须在指定之前复制对象：

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

原始答复：

在您提供的示例中，modalData2输入随modalData1发生变化，因为它们在ng模型属性中分配了相同的模型：

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

modalData1：


modalData2：

当我修复它时，它们是独立的（）：

modalData1：


modalData2：

---

然后，当您更新modalData1输入时，另一个不会更改。

这是因为angularjs支持双向绑定，这是在您使用angularjs提供的指令ng model时完成的，并且由于您使用相同的ng model值绑定两个输入字段，因此更改一个会反映到另一个

默认情况下，您使用的简单数据类型（如数字1（var option=1：作为整数处理））是复制的另一方面，对象或函数是通过引用传递的，因此它们的内容似乎绑定在一起。

在第一种情况下，分配的公共变量是一个整数，这是一种值类型。在第二种情况下，它是一个对象，是引用类型。这意味着，在第一种情况下，您将1的值分配给两个范围变量，因此彼此之间没有链接，而在另一种情况下，您不是复制数据对象，而是将引用分配给原始对象；因此，当对象改变时，引用反映了这一点。我明白了。所以当涉及到对象时，我需要始终使用angular.copy（）来剪切绑定？谢谢！那使我很困惑