解耦AngularJS範圍從局部變量變量值值

Question

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

下面是HTML代碼：

<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> 

我試圖加密密碼，並將其發送到REST API。但是，當我單擊提交時，表單中的密碼文本字段會顯示加密的密碼。

我已將整個數據複製到一系列局部變量中。但$ scope.signupdata仍然以某種方式反映了加密文本。而且我無法將$ scope.signupdata中的加密文本解耦。

您能否讓我知道我在這裏做錯了什麼。

Answer 1

問題是有效載荷和本地是相同的對象，因此最終改變local.password更改$scope.signUpData.password。所以，請嘗試複製有效載荷。

$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產生源​​的深層副本。它應該解決你的問題。

Answer 2

我還沒有測試過這個，但我認爲問題在於對象是通過引用傳遞的，所以var local = payload，將本地設置爲與$ scope.signUpData相同的對象，而不是它的副本。

另一方面，字符串按值傳遞。如果您嘗試將本地設置爲空白對象（var local = {}）並將字符串複製到其屬性中，則不應再更新$ scope.signUpData.password，因爲引用將被破壞。