获取作用域的旧值
get the old value of the scope
通过这段代码,我试图在编辑之前获取事件的副本或在事件视图中进行任何更改以实现取消按钮,因此我将其复制到 oldValue 变量,但事件和 oldValue 始终为空,因为 (如我所想)它们在填充事件变量
的事件工厂的return之前执行
我该怎么做才能解决这个问题?
事件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."…}
在 angular 中,您可能希望通过多种方式恢复到旧数据,以下所有方式都只涉及控制器而不是指令。
在恢复到任何更改之前的原始数据的情况下,您可以在加载时简单地将数据复制到另一个变量,并在需要时替换更改的数据。
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>
通过这段代码,我试图在编辑之前获取事件的副本或在事件视图中进行任何更改以实现取消按钮,因此我将其复制到 oldValue 变量,但事件和 oldValue 始终为空,因为 (如我所想)它们在填充事件变量
的事件工厂的return之前执行我该怎么做才能解决这个问题?
事件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."…}
在 angular 中,您可能希望通过多种方式恢复到旧数据,以下所有方式都只涉及控制器而不是指令。
在恢复到任何更改之前的原始数据的情况下,您可以在加载时简单地将数据复制到另一个变量,并在需要时替换更改的数据。
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>