问题:当我调用服务时模型属性被重置,我怀疑这不是实际调用,而是范围问题。
背景:应用程序是一个简单的应用程序,它呈现从API获取的资源列表。然后,用户能够与所述资源交互(通过我们的表单共享,更详细地查看等)。用户能够通过启用更多共享并选择多个住宅或通过单击共享按钮来共享一个或多个资源。在这两种情况下,都会为对象分配一个选定的属性。如果用户单击共享按钮(个人),则会自动启用共享模式,并提示用户输入必要的详细信息。
我遇到的问题是,当选择资源时,启用共享模式(或过滤模式)时,新编辑的“selected”属性将重置为其初始状态。
代码由几个指令和服务组成。 list指令负责呈现和处理源列表。一个控制指令,它可以启用共享和过滤模式。选择服务,用作当前选择的存储。控制服务,用作多个应用程序设置的存储。
可以使用url(硬过滤器)和使用controls指令(软过滤器)中的控件来过滤列表。加载后,列表通过其他服务请求资源,并在解析承诺后填充列表。此时,数据将被清理,并在必要时进行过滤(硬)。
ResidenceListDirective.js
function residenceList($filter, $timeout, $window, ResidenceService, ModalService, ControlsService, filterByIds, SelectionService, $stateParams, config) {
return {
templateUrl: 'views/residence_list.html',
restrict: 'A',
link: function($scope) {
var getControls = function() {
return ControlsService.getAll();
};
$scope.$watch(getControls, function(newValue) {
$scope.selectionMode = newValue.selectionMode;
if ($scope.allResidences) {
setSoftFilter(newValue);
}
}, true);
function setSoftFilter(filterValue) {
if ((filterValue.currentFilter !== null) && (filterValue.currentFilter !== $scope.currentFilter)) {
$scope.currentFilter = filterValue.currentFilter;
changeFilter();
} else {
$scope.softFilteredResidences = angular.copy($scope.hardFilteredResidences);
}
}
ResidenceService.getAllResidences()
.then(function(data) {
$scope.allResidences = data;
$scope.hardFilteredResidences = angular.copy($scope.allResidences);
// callback for when the data has finished loading
successHandler();
});
function changeFilter() {
// if the currentFiler is a number, lets filter by bedroom count
$timeout(function() {
if (angular.isNumber($scope.currentFilter)) {
$scope.softFilteredResidences = $filter('filter')($scope.hardFilteredResidences, {bedrooms: $scope.currentFilter}, true);
} else {
// if current filter we have to filter by the input given
// TODO: parse the string given and use that to filter instead of hardcoding value here
...
}
}, 500);
}
// take all of the prices and run them though the filter in
// order to filter all the prices in the start and not on each
// digest cycle.
var cleanData = function() {
angular.forEach($scope.hardFilteredResidences, function(residence) {
// I can set the default here
//residence.selected = false;
});
};
/**
* callback for when the data finishes loading.
*/
var successHandler = function() {
cleanData();
$scope.hideList = false;
setSoftFilter(ControlsService.getAll());
};
$scope.setSelection = function(residence) {
console.log(residence);
var selection = $filter('filter')($scope.softFilteredResidences, {selected:true}, true);
SelectionService.setSelection(selection);
};
$scope.shareSingle = function(item) {
item.selected = true;
// // scroll up
$window.scrollTo(0,0);
//item.selected = true;
SelectionService.setSelection([item]);
console.log(SelectionService.getSelection());
ControlsService.toggleMode('email');
$scope.reAddSelection();
console.log('clicked');
};
$scope.getSelected = function() {
return $filter('filter')($scope.softFilteredResidences, {selected: true}, true);
};
}
};
}
angular.module('ResidenceRenderer').directive('residenceList', residenceList);
ControlsService.js
function ControlsService() {
var controls = {
emailMode: false, // controls the state of the sharing form
filtersMode: false, // controls the state of the filters
selectionMode: false, // controls whether the selection boxes on each row is visible currentFilter: null,
currentMode: null
};
...
function setMultiple(values) {
for (var value in values) {
controls[value] = values[value];
}
return controls;
}
function toggleMode(desiredMode) {
var newStates = {};
if (desiredMode === 'filter') {
newStates = {
emailMode: false,
selectionMode: false,
filtersMode: true,
currentMode: 'filter'
};
} else if (desiredMode === 'email'){
newStates = {
emailMode: true,
selectionMode: true,
filtersMode: false,
currentMode: 'email'
};
} else {
newStates = {
emailMode: false,
selectionMode: false,
filtersMode: false,
currentMode: null
};
}
setMultiple(newStates);
}
return {
toggleMode: toggleMode,
setMultiple: setMultiple
};
}
angular.module('ResidenceRenderer').service('ControlsService', ControlsService);
SelectionService.js
function SelectionService() {
var selection = [];
function setSelection(selectedObjects) {
selection = selectedObjects;
}
function getSelection() {
return selection;
}
return {
getSelection: getSelection,
setSelection: setSelection
};
}
angular.module('ResidenceRenderer') .service('SelectionService', SelectionService);
我收集了一些线索,但我不知道发生了什么。如果我没有设置默认的selected
属性,那么要么设置为true
或false
,然后启用过滤器或共享模式,该属性就会消失。如果我指定默认选定值,则在切换过滤器或共享模式时,属性默认为其初始值。