Question

通过这段代码，我试图在编辑之前获取事件的副本或在事件视图中进行任何更改以实现取消按钮，因此我将其复制到oldValue变量，但事件和oldValue总是为空（因为我）认为它们在填充事件变量

的事件工厂返回之前执行

我该怎么做才能解决这个问题？

事件html

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

事件控制器

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');

}

事件视图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>

事件视图指令

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

活动工厂

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

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

}

这就是我在日志中看到的内容

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."…}

Answer 1

有几种方法可能需要以角度恢复旧数据，以下所有方法仅涉及控制器而不是指令。

如果在任何更改之前恢复原始数据，您只需在加载时将数据复制到另一个变量，并在需要时替换已更改的数据。

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

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

如果要在事件发生之前（即最后一次ngModel更新之前）恢复数据，一个选项是使用$ scope。$ watch来不断覆盖存储在变量中的先前值。

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

或者对于输入，您可以使用$rollbackViewValue()

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

html将是

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

获取范围的旧值

1 个答案: