Question

现在我正在使用ngDisabled在用户执行某些操作（如保存）后禁用某些按钮和一些输入。但这会造成很多混乱。

我正在寻找一种方法来禁用当前视图，可能会以某种方式“淘汰”或“模糊”。

要向用户显示正在使用ui.notification加载/保存数据的应用程序。是否有可能“关注”此通知，以便背景无法点击？

更新，显示我的一个功能，我在哪里使用通知。

$scope.deleteItem = function(ID){
    var result = confirm('You sure?');
    if (result) {

        // creating the notification
        var save = Notification.info({
            message: '<i class="fa fa-spinner fa-pulse"></i> Loading..',
            positionY: 'top',
            positionX: 'center',
            delay: false
        });

        var deleteItem = ItemService.removeItem(ID);
        deleteItem.then(function(){
            var elementPos = $scope.arrays.ItemArray.map(function(x) {return x.ID; }).indexOf(ID);
            $scope.arrays.itemArray.splice(elementPos,1);

            // when item is delted, delete notification
            save.then(function(notification){
                notification.kill(true);
            });

            $scope.fetchData();
        },function (reason) {
            console.log(reason);

            // if item is not deleted (error) show error notice
            Notification.error({
                message: '<i class="fa fa-exclamation-triangle"></i> Error',
                positionY: 'top',
                positionX: 'center',
                delay: 2000
            });
            // delete 'loading' notification
            save.then(function(notification){
                notification.kill(true);
            });

        });
    }
};

Answer 1

所以，我决定使用模态

来寻找@Raulucco的建议

为了让模态知道加载/保存何时完成，我必须创建一个工厂，到目前为止看起来像这样：

.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
    }


.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.left{
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }

将我的信息工厂注入我的控制器

myApp.factory('info', function() {
    return {
        status: '',
        info: ''
    }
});

模态函数看起来像这样

angular.module('myApp').controller('Ctrl', function ($scope, $log, $uibModal, info ) {

$scope.info = info;

使用控制器：

$scope.showInfo = function() {
    var modalInstance = $uibModal.open({
        templateUrl: 'infoModal.html',
        controller: 'infoCtrl',
        size: 'sm',
        animation: 'true',
        backdrop: 'static',
        resolve: {
            info: function() {
                return $scope.info;
            }
        }
    });
    modalInstance.result.then(function (editable) {

    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

要打开模态，只需在需要时调用它

angular.module('myApp').controller('infoCtrl', function ($scope, $uibModalInstance, info) {

$scope.icon = 'fa fa-spinner fa-pulse';
$scope.color = 'blue';
$scope.editable = info;

$scope.$watch('editable.status', function(newValue, oldValue) {
    if (newValue == 'success'){
        $scope.icon = 'fa fa-check';
        $scope.color = 'green';
        $uibModalInstance.close('ok');
    } else if (newValue == 'error') {
        $scope.icon = 'fa fa-exclamation-triangle';
        $scope.color = 'red';
    }
});
$scope.ok = function () {
    $uibModalInstance.close('ok');
};
});

要关闭模态，请在加载/保存完成后更改$scope.info.info = ''; $scope.info.status = 'loading..'; $scope.showInfo();

$scope.info.status

模态控制器中的$scope.info.status = 'success';会跟踪状态，如果成功则会关闭

这可能看起来很复杂，但结果还不错。我唯一害怕的是使用$watch，但似乎没问题

加载/保存数据时禁用视图

1 个答案: