Понимание angularjs $ apply и $ scope при редактировании объекта

Question

Почти в каждом приложении, с которым вы столкнулись, есть 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 также изменен исходный объект. Поэтому в случае i cancel изменения object будут по-прежнему выглядеть так, как если бы они были изменены.

Для этого я попытался найти $apply и copy, однако я не вижу, как это будет реализовано в этом примере.

Может ли кто-нибудь сказать мне, что является лучшим пратисом в вышеуказанной ситуации? как вы, ребята, справляетесь с этими вещами?

Answer 1

Если вы хотите редактировать копию вы можете использовать:

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

Затем, когда вы подтвердили обновление сервера вы можете продлить оригинал с обновленной копии:

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