在AngularJS(真棒框架!)中创建我的应用程序时,我陷入了一个任务:在某些操作后如何显示和隐藏隐藏的div
(ng-show
)。AngularJS在延迟后隐藏div
详细描述:使用AngularUI $modal
服务我问,如果用户想执行操作,如果是,我运行服务通过$http
为POST请求发送我想删除哪个项目。完成后,我想用信息显示隐藏的div
,该过程已成功完成。我创建了一个简单的服务$timeout
设置div's
ng-show
并在一段时间后隐藏,但它不更新分配给ng-show
指令的变量。下面是一些代码:
控制器上市和删除项目
$scope.deleteSuccessInfo = false; //variable attached to div ng-show
$scope.deleteCluster = function(modalType, clusterToDelete) {
modalDialogSrvc.displayDialog(modalType)
.then(function(confirmed) {
if(!confirmed) {
return;
}
clusterDeleteSrvc.performDelete(itemToDelete)
.then(function(value) {
//my attempt to show and hide div with ng-show
$scope.deleteSuccessInfo = showAlertSrvc(4000);
updateView(itemToDelete.itemIndex);
}, function(reason) {
console.log('Error 2', reason);
});
}, function() {
console.info('Modal dismissed at: ' + new Date());
});
};
function updateView(item) {
return $scope.listItems.items.splice(item, 1);
}
部分服务的删除项目
function performDelete(itemToDelete) {
var deferred = $q.defer(),
path = globals.itemsListAPI + '/' + itemToDelete.itemId;
getDataSrvc.makeDeleteRequest(path)
.then(function() {
console.log('Item removed successfully');
deferred.resolve({finishedDeleting: true});
}, function(reason) {
console.log('error ', reason);
deferred.reject(reason);
});
return deferred.promise;
}
return {
performDelete: performDelete
};
与$超时简单服务后改变布尔值一段时间
angular.module('myApp')
.service('showAlertSrvc', ['$timeout', function($timeout) {
return function(delay) {
$timeout(function() {
return false;
}, delay);
return true;
};
}]);
我试过$scope.$watch('deleteSuccessInfo', function(a, b) {...})
没有效果。如何延迟后申请虚假?或者,也许你会以其他方式实现这一目标?
非常感谢您的帮助!
谢谢你的解决方案何塞普。无论如何,我希望创建一个可重用的showAlertSrvc服务,我可以使用其他控制器(如创建项目)轻松使用。 – cachaito 2014-10-30 23:06:17
@cachaito我会更新我的答案,以解释为什么这项服务不值得,请在5分钟内查看我的答案。没有这项服务有一个很好的理由。 – Josep 2014-10-30 23:07:50
我会等待@Josep :-)与此同时,我读了$ q docs,并在retunredPromise.then(successCallback,errorCallback,notifyCallback)中发现了第三个回调函数。你会说什么来设置:$ scope.deleteSuccessInfo = true在successCallback并设置$超时与$ scope.deleteSuccessInfo = false在notifyCallback? – cachaito 2014-10-30 23:22:02