Angular UI bootstrap uibModalInstance.Ergebnis nicht nachgeben beliebigen Wert

Unten ist mein code für die Richtlinie cabinet und meine beiden Controller CabinetThumbnails,ModalCtrl. Basierend auf meine Anforderung ich bin mit der Richtlinie cabinet und die CabinetThumbnails zu Rendern paar widgets und klicken Sie dann auf auf jedes widget mit ModalCtrl öffnen Sie ein popup-Menü. Die Widgets sind die Erzeugung von fein -, pop-up öffnet auch in Ordnung, aber (uibModalInstance.result.then(function (thumbnailData)) funktioniert nicht. Also , nicht schlagen, der service zu cabinetService.getComments(thumbnailData). Was ist hier falsch ?konnte nicht herausfinden.

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();
        }
    }
}());
  • Sie erwarten thumbnailData beheben übergeben werden, um Ihre uibModalInsrance.Ergebnis Versprechen Rückruf. Ich denke nicht, dass das richtig ist. Versuchen Sie sich einfach nur die vm.Miniatur, um cabinetService.getComments statt.
InformationsquelleAutor Sri7 | 2016-02-26
  1. 4

    Hier sind ein paar Dinge zu beachten:

    1. Zuerst von all, Sie brauchen nicht zu verwenden controllerAs wenn Sie die Definition der modal-in-ui-bootstrap-sollten Sie nur verwenden controller: myModalController as vm (oder in deinem Fall Strg statt).

    2. In Ihrer Richtlinie jedoch sind Sie definieren controllerAs: 'ctrl', aber Sie später verwenden vm.

    3. In modale controller sind nur mit der $uibModalInstance.dismiss() Methode, die entlassen Methode schließt das modale und aktiviert das Versprechen Ablehnung handler für die uibModalInstance.result Versprechen.
      Sollten Sie verwenden $uibModalInstance.close() zu beheben, aktivieren Sie die handler. ansonsten sind alle, der code würde nicht ausgeführt werden.

    Ich würde geschrieben haben es wie folgt

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

    Hinzufügen und 

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

    zu ModalCtrl

    • ich danke Ihnen sehr für Ihren Vorschlag , aber ich habe bereits versucht, verschieben Sie die service-Aufruf auf die eigentliche Referenzierung controller und alles funktionierte reibungslos. Ich werde versuchen, Ihren Ansatz zu. danke!!!
    InformationsquelleAutor svarog
  2. 2

    Eigentlich zog ich die service-Aufruf zu den verweisen auf controller, habe es gelöst und gearbeitet.

    (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();
    }
}
}());
    InformationsquelleAutor Sri7
Schreibe einen Kommentar