CODEWITHSUNDEEP
angularjs
Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

AngularJS: $rootscope and $scope bind issue

This is my controller.

angular.module('xyz').controller('MyController', function($scope, $rootScope) {
    $scope.myVar = 123;
    $rootScope.myVar = $scope.myVar;
});

Now the issue is that for some reason I have to save the same value in $rootScope also. But after I save this value, if the user updates the value in the view, the value gets updated in $scope. But due to binding $rootScope takes precedence and therefor angular updates the value of $scope.myVar with what is in $rootScope.myVar.

Is there a way where a reference is not created between these two variables.

Upvotes: 0

Views: 697

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

If it's a primitive type like a number/string/boolean/etc... it won't be a reference (your example is this type). If it's an object/function/array/etc.. it will be. So to destroy the reference you'd use angular.copy:

$rootScope.myVar = angular.copy($scope.myVar);

Reference:

angular.module('xyz').controller('MyController', function($scope, $rootScope) {
    $scope.myVar = 123;
    $rootScope.myVar = $scope.myVar; //won't be a reference
});

angular.module('xyz').controller('MyController', function($scope, $rootScope) {
    $scope.myVar = { data: 123 };
    $rootScope.myVar = $scope.myVar; //will be a reference
    $rootScope.myVar = { data: $scope.myVar.data }; //won't be a reference
});

Upvotes: 2

Related Questions