Gopalaiah Vinay Gopalaiah Vinay - 6 months ago 21
AngularJS Question

Decoupling AngularJS scope variable values from local variable values

$scope.encryptSend = function(payload, tempPwd){
var local = payload;
local.password = Encryption.encrypt(tempPwd);
local.confirm_password = local.password;
$http.post('REST API URL', local).success(function(response) {
CommonService.setLogin(true);
$state.go('home.bookings');
});
}


$scope.doRegister = function() {
var tempPwd = $scope.signUpData.password;
var tempCPwd = $scope.signUpData.confirm_password;
var data = $scope.signUpData;

if ($scope.signUpData.tc) {
if ($scope.signUpData.password === $scope.signUpData.confirm_password) {
var payload = data;
$scope.encryptSend(payload, tempPwd);
}
}
};


Below is the HTML code:

<ion-view title="Signup" id="page6" class=" ">
<ion-content padding="true" class="has-header">
<form id="signup-form3" class="list ">
<ion-list id="signup-list3" class=" ">
<label class="item item-input item-floating-label" id="signup-input3">
<span class="input-label">Business Name</span>
<input type="text" placeholder="Business Name" ng-model="signUpData.business_name">
</label>
<label class="item item-input item-floating-label" id="signup-input4">
<span class="input-label">Username</span>
<input type="text" placeholder="Username" ng-model="signUpData.username">
</label>
<label class="item item-input item-floating-label" id="signup-input5">
<span class="input-label">Password</span>
<input type="password" placeholder="Password" ng-model="signUpData.password">
</label>
<label class="item item-input item-floating-label" id="signup-input6">
<span class="input-label">Confirm Password</span>
<input type="password" placeholder="Confirm Password" ng-model="signUpData.confirm_password">
</label>

<label class="item item-input item-floating-label" id="signup-input6">
<span class="input-label">Email Id</span>
<input type="email" placeholder="Email Id" ng-model="signUpData.emailId">
</label>

<label class="item item-input item-floating-label" id="signup-input6">
<span class="input-label">Mobile Number</span>
<input type="number" placeholder="Mobile Number" ng-model="signUpData.mobileNo">
</label>
<ion-checkbox ng-model="signUpData.tc">I agree to the Terms & Conditions</ion-checkbox>

</ion-list>
<button id="signup-button3" class=" button button-positive button-block " ng-click="doRegister()">Sign up</button>
</form>
</ion-content>
</ion-view>


I am trying to encrypt the password and send it to the rest api. But the password textfield in the form, when I click submit displays the encrypted password.

I have copied the entire data into a series of local variables. But still somehow the $scope.signupdata is reflecting the encrypted text. And I am not able to decouple the encrypted text from the $scope.signupdata.

Can you please let me know what I am doing wrong here.

Answer

The problem is payload and local is the same object, thus changing local.password changes $scope.signUpData.password eventually. So, try copying the payload.

$scope.encryptSend = function(payload, tempPwd){
var local = angular.copy(payload);
local.password = Encryption.encrypt(tempPwd);
local.confirm_password = local.password;
$http.post('REST API URL', local).success(function(response) {
  CommonService.setLogin(true);
  $state.go('home.bookings');
});
}

angular.copy creates a deep copy of source payload. It should solve your problem.

Comments