I tried searching SO for similar question as mine, but could not get any. Pardon if this question is duplicate and has already been answered.
My HTML has two input fields for First Name and Last Name, and a button:
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<input type="text" ng-model="fname"/>
<input type="text" ng-model="lname"/>
<input type="button" ng-click="createObj();" value="Clear Scope"/>
<p>Fname = {{fname}}</p>
<p>Lname = {{lname}}</p>
</div>
This is my JS file which has the controller function:
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){
$scope.fname = "sandeep";
$scope.lname = "nayak";
$scope.createObj= function(){
var obj = {fn:$scope.fname, ln: $scope.lname};
console.log(obj);
$scope.fname = "";
$scope.lname = "";
console.log(obj);
};
});
In createObj method, I create an object which holds the first name and last name, and then I clear the $scope.
I log the object twice, before and after I clear the $scope. But I do not see any difference.
Why is the object still same, even after I clear the $scope, since I refer the $scope in my object?
/
I tried searching SO for similar question as mine, but could not get any. Pardon if this question is duplicate and has already been answered.
My HTML has two input fields for First Name and Last Name, and a button:
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<input type="text" ng-model="fname"/>
<input type="text" ng-model="lname"/>
<input type="button" ng-click="createObj();" value="Clear Scope"/>
<p>Fname = {{fname}}</p>
<p>Lname = {{lname}}</p>
</div>
This is my JS file which has the controller function:
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){
$scope.fname = "sandeep";
$scope.lname = "nayak";
$scope.createObj= function(){
var obj = {fn:$scope.fname, ln: $scope.lname};
console.log(obj);
$scope.fname = "";
$scope.lname = "";
console.log(obj);
};
});
In createObj method, I create an object which holds the first name and last name, and then I clear the $scope.
I log the object twice, before and after I clear the $scope. But I do not see any difference.
Why is the object still same, even after I clear the $scope, since I refer the $scope in my object?
http://jsfiddle/7eo4zcvq/
Share Improve this question asked Apr 16, 2015 at 6:31 Sandeep NayakSandeep Nayak 4,7571 gold badge25 silver badges33 bronze badges 1- 2 You are not referring the scope in the object, you are assigning a property from scope on to your object (which is pass by value) – Chandermani Commented Apr 16, 2015 at 6:38
4 Answers
Reset to default 5This is not related to Angular but simply to Javascript itself.
When you write
var obj = {fn:$scope.fname, ln: $scope.lname};
$scope.fname/lname are resolved into their value, which are strings, so this object happens to be in fact initialized to
var obj = {fn:"sandeep", ln:"nayak"};
So clearing the scope won't have any effect on it: that is because strings are not treated like regular objects but like native types (same as numbers and boolean).
A simpler example of this behavior is that:
var a = "hello";
var b = a;
a = "world";
console.log(a); // outputs "world"
console.log(b); // outputs "hello"
console.log(a === b); // outputs false
You need to update the variable obj again with the new values of fname and lname. Clearing the values of fname and lname won't have any effect on obj. Kindly see updated code below.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){
$scope.fname = "sandeep";
$scope.lname = "nayak";
$scope.createObj = function(){
var obj = {fn:$scope.fname, ln: $scope.lname};
console.log(obj);
$scope.fname = "";
$scope.lname = "";
var obj = {fn:$scope.fname, ln: $scope.lname};
console.log(obj);
}
});
To update the value of obj after clearing the scope; you will have to either manually update the obj as suggested by @Joshua Arvin Lat or you may like to convert the fn and ln to functions:
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){
$scope.fname = "sandeep";
$scope.lname = "nayak";
$scope.createObj = function(){
var obj = {fn:function() {return $scope.fname;} , ln: function() {return $scope.lname;} };
console.log(obj.fn());
console.log(obj.ln());
$scope.fname = "";
$scope.lname = "";
console.log(obj.fn());
console.log(obj.ln());
}
});
Working Example: http://jsfiddle/7eo4zcvq/2/
There is an easier way to store the reference. Define an object in $scope, not a variable of primitive type.
$scope.person = {
fname: "sandeep",
lname: "nayak"
}
$scope.createObj = function(){
var obj = {
person: $scope.person,
toString: function(){
return this.person.fname + ' ' + this.person.lname;
}};
console.log(obj.toString());
$scope.person.fname = "a";
$scope.person.lname = "a";
console.log(obj.toString());
}
Updated jsfiddle