角度模态回报承诺

时间:2016-06-21 20:31:41

标签: javascript angularjs promise

我想在执行操作之前向用户显示弹出式警告模式(在这种情况下,删除)。如果他们点击模式中的okay,则会继续,如果他们点击cancel,则会执行其他操作。

要做到这一点,我试图将链中的模态承诺传递回初始调用$rootScope.openDirections('warning').then(...,以便我可以决定在那里做什么。

但是我收到了错误:

$ rootScope.openDirections(...)。然后不是函数 at Scope.$scope.deleteObj

告诉我承诺没有被退回:

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

这会调用$ rootScope函数:(我看到这里的对象类型是一个promise ...所以它现在不应该返回原始调用者吗?)

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

调用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?';
                        }
                    }
                });
            }

其中呈现message.html模态模板:

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

使用directionsCtrl作为模态:

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

    }]);

1 个答案:

答案 0 :(得分:1)

$ modal.open返回一个$ modalInstance,它有一个名为result的属性,即promise。你必须在那上面调用.then()。所以在你的情况下,你想要这个:

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

或者,在您的openDirections方法中,您可以返回承诺:

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