get the old value of the scope

Question

By this code I'm trying to take a copy of event before editing or any changing in the event view to implement cancel button , so I copied it to oldValue variable, but the event and oldValue are always empty because ( as I think ) they execute before the return of the event factory that fills the event variable

what can I do to solve this problem ?

Event html

<sw-event-view event="ev.event" ng-hide="ev.loading" ng-if="ev.view_type == 'event'" ></sw-event-view>

Event controller

angular.module('App')
       .controller('EventCtrl', function ($scope, $state, $http, EventFactory) {
            ev.event = {};

            console.log('controller start');
            ev.view_type = 'event';
            EventFactory.getEvent(1)
                       .then( function(r) { 
                                    ev.event = r.data.data.event;
                                    console.log('event controller',ev.event);
                                    ev.loading = false; 
                         } ,handleHttpError);
             console.log('end of controller');

}

event view html

<div>Something</div
<sw-basic-info ng-show="!edit_mode && selected_tab == 'basic info'" event="event"></sw-basic-info> 

<sw-locations-list ng-show="(selected_tab == 'locations') && !edit_mode" locations="event.locations"></sw-locations-list>

event view directive

angular.module('App')
       .directive('swEventView', function (EventFactory) {
         return {
            scope: {
               event: "=", 
           },
         templateUrl: 'template url',
         restrict: 'E',
         link: function (scope, element, attrs) {
             console.log('event view scope.event', scope.event);
             scope.oldValue = angular.copy(scope.event);
             console.log('event view scope.oldValue', scope.oldValue);
         }
   }

event factory

angular.module('App')
       .factory('EventFactory', function ($http, $q) {

            var getEvent = function (id) {
                              console.log('event factory', id);
                              return $http.get(server + "event/"+id);
              }

}

Thats what I see in the Log

controller start
event factory 1
end of controller
event view scope.event Object {}
event view scope.oldValue Object {}

event controller
Object {id: 1, event_code: "5020048072", name: "Heathcote", short_name: "Hea", description: "Dolor unde molestiae fuga culpa aut excepturi iste et esse tempore illo quia quod aut."…}

score 1 · Accepted Answer · answered Nov 06 '15 at 07:11

There are several ways you may want to revert to old data in angular and all of the below involve just the controller rather than directives.

In the case of reverting to the original data before any changes, you can simply copy the data to another variable when loaded, and replace changed data if required.

var originalData = angular.copy($scope.data);

$scope.reset = function() {
  $scope.data = originalData;
};

If you want to revert to the data immediately before an event (ie before the last ngModel update), one option is to use $scope.$watch to constantly overwrite the previous value stored in a variable.

var prevData;

$scope.$watch('data', function (nv, ov) {
    // Add to history (create a copy)
    prevData = angular.copy(ov);
}, true);

$scope.reset = function() {
   $scope.data = prevData;
};

Or for an input you can use $rollbackViewValue()

$scope.cancel = function(e) {
    // if the escape key pressed
    if (e.keyCode == 27) {
       $scope.formName.fieldName.$rollbackViewValue();
    }
};

The html would be

<form name="formName" role="form">
    <input type="number" class="form-control" name="fieldName" ng-model="data" ng-model-options="{updateOn: 'blur'}" ng-keyup="cancel($event)">
</form>

get the old value of the scope

1 Answers1