在編輯對象時瞭解angularjs $ apply和$ scope

在幾乎所有遇到的應用程序中，您都有需要編輯的objects。

在我的情況下，我有一個objects的列表，您可以編輯它們，然後在編輯它們。（角的魔力）。然而，這有一個副作用，例如下面的控制器：

app.controller('editCategoryInstant', ['$http', '$scope', '$state', '$modalInstance', 'api', '$filter', 'category', 'LRM', function ($http, $scope, $state, $modalInstance, api, $filter, category, LRM) { 

    $scope.LRM = LRM; 
    $scope.category = category; 
    $scope.ok = function() { 
     $scope.category.color = $('#color').val(); 
     category = $scope.category; 
     if ($scope.category .icon != null) { 
      $http({ 
       url: api.getUrl('category', category.id), 
       method: "PUT", 
       data: {category: $scope.category} 
      }).success(function (data, status, headers, config) { 

      }).error(function (data, status, headers, config) { 
       var i = 0; 
      }); 
      $modalInstance.dismiss('cancel'); 
     } 
     else { 
      alert('Vælg ikon'); 
     } 

    }; 

    $scope.cancel = function() { 
     $scope.category = $scope.master; 
     $modalInstance.dismiss('cancel'); 
    }; 

    $scope.clickUpload = function() { 
     setTimeout(function() { 
      angular.element('#fileUpload').trigger('click'); 
     }, 0); 
    }; 

}]);

好吧，所以我會爲你剪下來。

爲此我想編輯一個現有的對象看起來像這樣：

var category = { 
    name: 'My Category', 
    icon: 'fa fa-bomb', 
    color: '#FFF', 
    description: 'This describes the category' 
};

現在我的category變量傳遞給controller

控制器綁定到modal視圖，看起來像這樣：

<div class="modal-header"> 
    <h3 class="modal-title" translate="STRUCTURE.CATEGORY.CREATE"></h3> 
</div> 
<form role="form" class="form-validation" ng-submit="ok()"> 
    <div class="modal-body"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <label class="control-label">{{'TERMS.NAME' | translate}}</label> 
       <input type="text" placeholder="{{'TERMS.NAME' | translate}}" class="form-control" 
         ng-model="category.name" required> 
      </div> 
      <div class="col-xs-6" style="margin-top: 10px;"> 
       <label>{{'LIBRARY.CATEGORY.SELECTICON' | translate}}</label> 
       <lb-icon-picker targetvariable="category"></lb-icon-picker> 
      </div> 
      <div class="col-xs-6" style="margin-top: 10px;"> 
       <label class="block">{{'LIBRARY.CATEGORY.SELECTCOLOR' | translate}}</label> 
       <lb-color-picker targetvariable="category"></lb-color-picker> 
      </div> 
      <div class="col-xs-12" style="margin-top: 5px;"> 
       <textarea class="form-control" style="height: 150px" placeholder="{{'TERMS.DESCRIPTION' | translate}}" ng-model="category.description"></textarea> 
      </div> 

     </div> 
    </div> 
    <div class="modal-footer"> 
     <a class="btn btn-grey" ng-click="cancel()" tooltip="{{ 'TOOLTIP.CANCEL' | translate }}"><i 
       class="fa fa-ban"></i></a> 
     <button type="submit" class="btn btn-success" tooltip="{{ 'TOOLTIP.SAVE_AND_EXIT' | translate }}"><i 
       class="fa fa-check-square-o"></i></button> 
    </div> 
</form>

現在我開始編輯對象，但由於two way data binding原來的對象也改變了。因此，如果我更改object仍然看起來好像它已被更改。

爲此目的，我試圖查找$apply和copy但是我無法看到這將如何在此示例中實現。

有誰能告訴我在上述情況下什麼是最佳實踐？你們如何處理這些事情？

來源

2015-11-05 Marc Rasmussen

如果你想編輯副本，你可以使用：

$scope.category = angular.copy(category);

然後，當您確認服務器更新您可以將原來的擴展與更新的副本：

angular.extend(category, $scope.category);

來源

2015-11-05 13:51:05 charlietfl

你能解釋發生了什麼幕後延續？（我正在尋找什麼時候應該使用它） –

基本上將屬性和值從源對象複製到目標對象https://docs.angularjs.org/api/ng/function/angular.extend – charlietfl

在編輯對象時瞭解angularjs $ apply和$ scope

回答

相關問題