javascript - 服务的 Angular 解决 promise

Question

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

我的问题是，在模式关闭后， Controller 从未收到已解决的 promise 。模态结果 promise ，我解决了我的 promise ，被击中，commentCount 是正确的值。

我对整个 promise 这件事还很陌生，所以这可能不是正确的方法，但它不应该像现在这样工作吗？

编辑:

我不只是从 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;
    }

来自 Controller 的代码:

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

Answer 1

我不确定这是否对您有帮助，但它肯定会帮助那些想要使用 Bootstrap 模式而不是浏览器默认模式的人。我制作了一个相互依赖的服务和 Controller :

.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 和方法，它将表现得像一个经典的警报模式，但具有您可以传递并稍后在 Controller 中处理的功能

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
}

当然，如果你想使用它，你必须注入(inject) Angular 用户界面 Bootstrap 。 我浪费了很多时间来开发这个，但它是值得的。每次都创建一个新 Controller 、新模板和所有其他东西很烦人。

从 Controller 然后你就可以很容易地使用它，只需先注入(inject)它。