Angular allow promise from service

Question

I have a service that contains a function that shows a boot modal. The result of the modality promises when it closes, is accepted inside the service, and then the call to the calling function is neutralized. The service function itself returns a promise.

My problem is that the controller never gets an allowed promise after the modal closes. The modal results promise when I make my promise, gets hit, and commentCount is the correct value.

I'm new to this promise, so this may not be the right way to do this, but shouldn't this work like it does now?

EDIT:

I'm not just returning a promise from an instance.result instance, because I need to do something else inside the service before returning the commentCount of the calling function. However, this has not yet been implemented.

service:

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 Code:

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

Answer 1

I'm not sure if this will help you, but it will definitely help someone who wants to have a bootable modal option instead of the default browsers. I made a service and a controller that depend on each other:

.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');
    };
});

and html file:

<!--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>

Now, depending on what type you want to use, you have several options: -If you pass headerText, bodyText and buttonText, it will behave like a classic notification method

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
}

, , angular ui bootstrap. , . , .

, .