Question

我有一个包含一个函数的服务，它显示了一个bootstrap模式。在关闭时，模态结果承诺在服务内部接收，然后将承诺解析为函数的调用者。服务功能本身返回一个承诺。

我的问题是，在模态关闭后，控制器永远不会收到已解决的承诺。模态结果承诺，我解决了我的承诺，被击中，而commentCount是正确的值。

我是整个承诺的新手，所以这可能不是正确的方法，但不应该像现在这样工作吗？

编辑：

我不只是从instance.result返回promise，因为在将commentCount返回给函数的调用者之前，我需要在服务中执行其他操作。但是，这还没有实现。

服务：

function postModal($http, $rootScope, $uibModal, userService, utilService, enumService, $q) {
        var service = {};      

        service.showModal = function (postId, category) {
            var deferred = $q.defer();

            var extraClass = (category == enumService.postType.ARTICLE) ? 'article-post' : '';
            var instance = $uibModal.open({
                templateUrl: 'app/views/post_modal.html',
                controller: 'postController',
                controllerAs: 'postController',
                windowClass: 'center-modal post-modal',
                backdropClass: 'post-backdrop ' + extraClass,
                background: 'static',
                resolve: {
                    postId: function () {
                        return postId;
                    },
                    category: function () {
                        return category;
                    },
                    modalInstance: function () {
                        return this;
                    }
                }
            });     

            instance.result.then(function (commentCount) { 
                deferred.resolve(commentCount);
            });

            return deferred.promise;
        };

        return service;
    }

来自控制器的代码：

service.showModal(postId, category)
.then(function (commentCount) {
     var comments = commentCount;
});

Answer 1

我不确定这会对你有所帮助，但它肯定会帮助那些想要使用自举模式而不是浏览器默认的人。我已经建立了一个服务和控制器，彼此依赖：

.service('AlertService', function($uibModal){
    /*
        headerText - presents text in header
        bodyText - presents text in body
        buttonText - presents text in button. On its click if method parameters is not passed, modal will be closed.
                    In situation that the method parameters is passed, on its click, method will be called. For situations
                    like that, there is parameter buttonText2 which will be used as cancel modal functionality.
        method - presents passed function which will be called on confirmation
        buttonText2 - presents text in button for cancel

     */
    var alert = function(headerText, bodyText, buttonText, method, buttonText2){

        method = method || function(){};
        buttonText2 = buttonText2 || '';

        $uibModal.open({
            animation: true,
            templateUrl: '/static/angular_templates/alert-modal.html',
            controller: 'AlertModalInstanceCtrl',
            size: 'md',
            resolve: {
                headerText: function () {
                  return headerText;
                },
                bodyText: function () {
                  return bodyText;
                },
                buttonText: function () {
                  return buttonText;
                },
                method: function () {
                    return method;
                },
                buttonText2: function () {
                    return buttonText2;
                }
            }
        });
    };

    return{
        alert: alert
    };

})
.controller('AlertModalInstanceCtrl', function ($scope, $uibModalInstance, headerText, bodyText, buttonText, method, buttonText2) {
    $scope.headerText = headerText;
    $scope.bodyText = bodyText;
    $scope.buttonText = buttonText;
    $scope.method = method;
    $scope.buttonText2 = buttonText2;

    $scope.ok = function () {
        $scope.method();
        $uibModalInstance.dismiss('cancel');
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

和html文件：

<!--Modal used for alerts in AlertService-->

<div class="modal-header">
    <h3 class="modal-title">{[{ headerText }]}</h3>
</div>
<div class="modal-body">
    <p>{[{ bodyText }]}</p>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()" ng-if="buttonText2">{[{ buttonText2 }]}</button>
    <button class="btn btn-primary" ng-click="ok()">{[{ buttonText }]}</button>
</div>

现在，根据您要使用的类型，您有以下几种选择： - 如果你传递headerText，bodyText和buttonText，它将表现得像一个经典的警报模式

AlertService.alert('Some header', 'Some message', 'Text button');

- 如果您传递headerText，bodyText，buttonText和方法，它将表现得像一个经典的警报模式，但具有您可以传递的函数，稍后可以在控制器中处理

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound);

$scope.createRound = function(){
//do something
}

- 最后一个。如果你传递了所有参数，它将像前一个一样，只是有可能取消和关闭模态。

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel');

$scope.createRound = function(){
//do something
}

当然，如果你想使用它，你必须注入角度ui引导程序。 我浪费了很多时间来开发它，但它值得。每次创建新控制器，新模板和所有其他东西时都很烦人。

从控制器那里你可以轻松地使用它，只需先注入它。

角度解决服务的承诺

1 个答案: