Javascript 角度UI引导uibModalInstance.result不产生任何值

下面是指令

CAB

的代码和我的两个控制器

CabinetThumbnails

，

ModalCtrl

。根据我的要求，我使用指令

cabinet

和

CabinetThumbnails

呈现两个小部件，然后使用

ModalCtrl

点击每个小部件打开一个弹出窗口。小部件生成良好，弹出窗口打开良好，但

（uibModalInstance.result.then（function（thumbnailData））

不起作用。因此，它也不会影响服务

cabinetService.getComments（thumbnailData）

。这里出了什么问题？无法确定

function () {
    'use strict';

    angular
        .module('myModule')
        .directive('cabinet', function () {
            return {
                restrict: 'E',
                replace: true,
                controller: CabinetThumbnails,
                controllerAs: 'ctrl',
                bindToController: true,
                link: link,
                templateUrl: 'app/cabinet/cabinet.directive.html',
                scope: {
                    thumbnail: '='
                }
            };
        });
    function link(scope, el, attrs) {
    }

    CabinetThumbnails.$inject = ['$scope','$uibModal','cabinetService'];

    function CabinetThumbnails($scope,$uibModal,cabinetService) {
        var vm = this;

        vm.showImage = showImage;

        activate();

        function activate() {
        }

        function showImage() {
            var uibModalInstance = $uibModal.open({
                animation: true,
                templateUrl: 'app/components/capture/cabinet.pop-up.html',
                controller: ModalCtrl,
                controllerAs: 'ctrl',
                size: 'lg',
                resolve: {
                    thumbnailData: function () {
                        return vm.thumbnail;
                    }
                }
            });

            uibModalInstance.result.then(function (thumbnailData) {
                spinner.spinnerShow();

                //call the service to get the comments
                cabinetService
                    .getComments(thumbnailData)
                    .then(function (data) {
                      $scope.comments = data;
                    })
                    .catch(function (err) {
                        growl.err('Unable to open the screen shot, Please try later !', {ttl: 20000});
                    })
                    .finally(spinner.spinnerHide);
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        }
    }

    ModalCtrl.$inject = ['$scope', '$uibModalInstance', 'thumbnailData', 'growl'];

    function ModalCtrl($scope, $uibModalInstance, thumbnailData, growl) {
        var ctrl = this;

        ctrl.thumbnailData = thumbnailData;
        ctrl.cancel = cancel;

        function cancel() {
            $uibModalInstance.dismiss();
        }
    }
}());

---

这里有几件事需要考虑：

首先，当您定义模式时，您不需要使用

controllerAs

，在ui引导中，您应该只使用

controller:myModalController作为vm

（或者在您的情况下使用ctrl）

然而，在指令中，您定义了

controllerAs:'ctrl'，

，但后来使用了

vm

在模态控制器中，您仅使用

$uibModalInstance.disease（）

方法，disease方法关闭模态并激活

uibModalInstance.result

承诺的承诺拒绝处理程序。 您应该使用

$uibModalInstance.close（）

激活解析处理程序。否则，所有代码都无法运行

我会这样写的

   spinner.spinnerShow();

   $uibModal.open({
       animation: true,
       templateUrl: 'app/components/capture/cabinet.pop-up.html',
       controller: ModalCtrl as ctrl,
       size: 'lg',
       resolve: {
           thumbnailData: function () {
               return ctrl.thumbnail;
           }
       }
   }).result
        .then(function (thumbnailData) {
            //call the service to get the comments
            return cabinetService.getComments(thumbnailData);   
        }, function() {
             $log.info('Modal dismissed at: ' + new Date());
        }).then(function (data) {
            // we get to this 'then' after cabinetService.getComments finished
            $scope.comments = data;
        }).catch(function (err) {
            $log.err('Unable to open the screen shot, Please try later !', {ttl: 20000});
        }).finally(spinner.spinnerHide);
    }

加

ctrl.ok = function() {
    $uibModalInstance.close(valueForResolveHandler);
};

---

到ModalCtrl

实际上，我将服务调用移动到了引用控制器，它得到了解决并正常工作

(function () {
'use strict';

angular
    .module('myModule')
    .directive('cabinet', function () {
        return {
            restrict: 'E',
            replace: true,
            controller: CabinetThumbnails,
            controllerAs: 'ctrl',
            bindToController: true,
            link: link,
            templateUrl: 'app/components/capture/cabinet.directive.html',
            scope: {
                thumbnail: '='
            }
        };
    });
function link(scope, el, attrs) {
}

CabinetThumbnails.$inject = ['$scope','$uibModal'];

function CabinetThumbnails($scope,$uibModal) {
    var vm = this;

    vm.showImage = showImage;

    activate();

    function activate() {
    }

    function showImage() {
        var uibModalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'app/components/capture/cabinet.pop-up.html',
            controller: ModalCtrl,
            controllerAs: 'ctrl',
            size: 'lg',
            resolve: {
                thumbnailData: function () {
                    return vm.thumbnail;
                }
            }
        });
    }
}

ModalCtrl.$inject = ['$scope', '$uibModalInstance', 'thumbnailData', 'growl','cabinetService'];

function ModalCtrl($scope, $uibModalInstance, thumbnailData, growl,cabinetService) {
    var ctrl = this;

    ctrl.thumbnailData = thumbnailData;
    ctrl.save = save;
    ctrl.cancel = cancel;

    //call this method to get executed while the directive loads to open the pop-up
    getComments();

    function getComments()
    {
        cabinetService
            .getComments(thumbnailData)
            .then(function (data) {
                ctrl.comments = data;
            })
            .catch(function (err) {
                growl.err('Unable to get comments, Please try later !', {ttl: 20000});
            })
    }

    function save() {
    var form = $scope.cabinetForm;

        if (!form.$invalid && form.$dirty && form.$valid) {
            var data = {
                CabinetFileID: ctrl.thumbnailData.CabinetFileID,
                Comment: ctrl.inputcomment
            };
            //call the service
            cabinetService
                .addComments(data)
                .then(function (data) {
                  //refresh the comments by calling the getComments method again
                    ctrl.thumbnailData.CommentCount = ctrl.thumbnailData.CommentCount + 1;
                    getComments();
                    ctrl.inputcomment = '';
                })
                .catch(function (err) {
                    growl.err('Unable to add comment, please try later !', {ttl: 20000});
                })
        } else {
            growl.info('Please enter the comment');
        }
    }

    function cancel() {
        $uibModalInstance.dismiss();
    }
}
}());

---

您希望将ThumbModelData resolve传递给UIBModalinsance.result promise回调。我认为这不正确。请尝试将vm.thumbnail传递给cabinetService.getComments。非常感谢您的建议，但我已经尝试将服务调用移动到实际的引用控制器，一切正常哦，我也会试试你的方法。谢谢！