延迟后的AngularJS隐藏div

延迟后的AngularJS隐藏div,angularjs,modal-dialog,timeout,q,Angularjs,Modal Dialog,Timeout,Q,在AngularJS(很棒的框架!)中创建我的应用程序时,我只做了一个任务:在一些操作之后如何显示和隐藏隐藏隐藏的div(ng show) 详细说明:使用AngularUI$modal服务我询问用户是否要执行操作,如果是,我通过$http运行服务来发布请求,以发送我要删除的项目。完成后,我想用信息显示隐藏的div,该过程已成功完成。我用$timeout创建了一个简单的服务来设置div的ng show并在一段时间后隐藏,但它不会更新分配给ng show指令的变量。下面是一些代码: 列出和删除项目的

在AngularJS(很棒的框架!)中创建我的应用程序时,我只做了一个任务:在一些操作之后如何显示和隐藏隐藏隐藏的
div
ng show

详细说明:使用AngularUI
$modal
服务我询问用户是否要执行操作,如果是,我通过
$http
运行服务来发布请求,以发送我要删除的项目。完成后,我想用信息显示隐藏的
div
,该过程已成功完成。我用
$timeout
创建了一个简单的服务来设置
div的
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
};
简单服务,使用$timeout在一段时间后更改布尔值

angular.module('myApp')
    .service('showAlertSrvc', ['$timeout', function($timeout) {

        return function(delay) {

            $timeout(function() {
                return false;
            }, delay);

            return true;
        };

    }]);
我尝试了
$scope.$watch('deleteSuccessInfo',函数(a,b){…})
,但没有效果。延迟一段时间后如何申请假?或者你可以用另一种方式来实现


提前感谢您的帮助

更改
showartsrvc
服务的实现,如下所示:

angular.module('myApp')
 .service('showAlertSrvc', ['$timeout', function($timeout) {
        return function(delay) {
            var result = {hidden:true};
            $timeout(function() {
                result.hidden=false;
            }, delay);
            return result;
        };
    }]);
 $scope.deleteSuccessInfo = {}; 
然后更改这两行:

deleteSuccessInfo
的声明应如下所示:

angular.module('myApp')
 .service('showAlertSrvc', ['$timeout', function($timeout) {
        return function(delay) {
            var result = {hidden:true};
            $timeout(function() {
                result.hidden=false;
            }, delay);
            return result;
        };
    }]);
 $scope.deleteSuccessInfo = {}; 
然后这样做:

$scope.deleteSuccessInfo = showAlertSrvc(4000);
最后,在您的视图中执行以下操作
“ng show=!deleteSuccesinfo.hidden”


谢谢你的解决方案。无论如何,我希望创建一个可重用的showAlertSrvc服务,我可以轻松地与其他控制器一起使用,如创建项目。@cachaito我将更新我的答案,以解释为什么该服务不值得,请在5分钟内检查我的答案。没有这项服务有一个很好的理由。@cachaito 2件事:1)我刚刚更新了我的答案,对不起,请看一下。2) 原因是因为我认为服务的实现最终将是$timeout的包装,或者落入一个非常常见的反模式@cachaito ok,检查最新的更新。我做这个是为了证明它是有效的。如果这是你想要的,请告诉我。谢谢当然,它在@Josep!谢谢你的帮助:-)