Angular modal return promise

Question

I'd like to present the user with a popup warning modal before they perform an action (delete in this case). If they click okay in the modal, it'll proceed, if they click cancel, it'll do something else.

To do this, I'm trying to pass the modal promise along the chain back to the initial calling $rootScope.openDirections('warning').then(... so I can decide what to do there.

However I'm getting error:

$rootScope.openDirections(...).then is not a function at Scope.$scope.deleteObj

Telling me that the promise is not being returned:

    $scope.deleteObj = function (id, type) {
        $rootScope.openDirections('warning').then(function (res) {
            // Do Stuff
        }, function (err) {
            console.log('ERROR', err);
        });

This calls a $rootScope function: (I see that the object type here is a promise... so shouldn't it be able to return now to the original caller?)

    $rootScope.openDirections = function (type) {
        // A Promise: Object {result: Promise, opened: Promise, rendered: Promise}
        return Modal.showDirections(type);
    };

Which calls Modal factory to open directions modal:

     return {
            ...
            showDirections: function(type) {   
                return $modal.open({
                    backdrop: 'static',
                    templateUrl: 'modal.html',
                    controller: 'directionsCtrl',
                    resolve: {
                        // Display custom modal template
                        obj: function () {
                            if (type === 'markdown') {
                                return {
                                    template: '/modals/directions.html'
                                };
                            } else {
                                return {
                                    template: '/modals/message.html'
                                };
                            }
                        },
                        testID : function () {
                            return 'WHAT DO I RETURN HERE?';
                        }
                    }
                });
            }

Which renders message.html modal template:

<div class="admin-directions">
    <div class="directions">
        ARE YOU SURE YOU WANT TO DELETE THIS?
    </div>
    <p class="dismiss-admin-help" ng-click="okay()">Okay</p>
    <p class="dismiss-admin-help" ng-click="cancel()">Cancel</p>
</div>

Which uses directionsCtrl for the Modal:

angular
    .module('DDE')
    .controller('directionsCtrl', ['$rootScope', '$scope', '$modalInstance', 'Modal', 'obj', 'Auth', 'VARS', '$route', '$location', 'testID',
        function ($rootScope, $scope, $modalInstance, Modal, obj, Auth, VARS, $route, $location, testID) {

            $scope.template = obj.template;

            $scope.testID = '';

            /**
             * Dismiss modal
             */
            $scope.ok = function() {
                $scope.testID = 'okay';
                return $modalInstance.result($scope.testID);
            };

            $scope.cancel = function() {
                $scope.testID = 'cancel';
                return $modalInstance.result($scope.testID);
            };

    }]);

Answer 1

$modal.open returns a $modalInstance that has a property called result which is the promise. You have to call .then() on that. So in your case, you want this:

    $rootScope.openDirections('warning').result.then(function (res) {
        // Do Stuff
    }, function (err) {
        console.log('ERROR', err);
    });

Or alternatively, in your openDirections method, you could just return the promise:

      showDirections: function(type) {   
            return $modal.open({
               //all your current stuff stays the same here
             }).result; //<-- notice that you are now returning the promise
        }