Angularjs data binding when passing a reference?

Question

Sometimes, when two variables refer to the same variable, they are not binding together like this:

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

When you change $scope.a, $scope.b does not change. See this Plunker

However, sometimes they are binding together, for example it happens to me in a modal like this:

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

See the Plunker. Here "modalData1" and "modalData2" are both referring to "data". In any modal of this Plunker, you change modalData1, then modalData2 changes with it.

Why it is like this??

Thank you!

In the first case, the common variable being assigned is an integer, which is a value type. In the second case, it is an object, which is a reference type. That means that in the first case, you are assigning the value of 1 to both scope variables so there is not link to each other, whereas in the other case, you are not duplicating the data object, but rather assigning a reference to the original object; thus when the object changes, the references reflect that. — GPicazo
– GPicazo, Commented Jul 21, 2015 at 19:58
I see. So when it comes to object, I need always use angular.copy() in order to cut the binding? — toby_yo
– toby_yo, Commented Jul 21, 2015 at 20:12

Keammoort · Accepted Answer · 2016-11-17 19:05:47Z

4

UPDATE:
You should copy the element, because since javascript is pass-by-reference both of this variables (references) are in fact pointing to the same object. If you want to remove that side effect you have to copy object before assigning:

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

plunker

ORIGINAL ANSWER:

In example you've provided modalData2 input is changing with modalData1, because they have the same model assigned in ng-model attribute:

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

When I fix it, then they are independent (plunker):

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

Then when you update modalData1 input, then the other does not change.

edited Nov 17, 2016 at 19:05

answered Jul 21, 2015 at 19:58

Keammoort

3,06517 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matthiasgiger · Accepted Answer · 2015-07-21 20:37:59Z

2

Simple data types like the number 1 (var option = 1: handled as an integer) you used are copied by default. Objects or functions on the other hand are passed by reference, so their contents will seem to bind together.

answered Jul 21, 2015 at 20:37

matthiasgiger

1,27412 silver badges20 bronze badges

Comments

Gaurav Sarma · Accepted Answer · 2015-07-21 20:07:23Z

0

Its because angularjs supports two-way binding which is being done here when you use ng-model which is directive provided by angularjs and since you are binding both the input fields with the same ng-model value changing one reflects on the other.

answered Jul 21, 2015 at 20:07

Gaurav Sarma

2,2972 gold badges29 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angularjs data binding when passing a reference?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related