gpt4 book ai didi

javascript - Angular UI bootstrap uibModalInstance.result 没有产生任何值

转载 作者:行者123 更新时间:2023-11-29 16:08:08 24 4
gpt4 key购买 nike

下面是指令 cabinet 和我的两个 Controller CabinetThumbnailsModalCtrl 的代码。根据我的要求,我使用指令 cabinetCabinetThumbnails 来呈现几个小部件,然后使用 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();
}
}
}());

最佳答案

这里有一些需要考虑的事情:

  1. 首先,在定义模态时,您不需要使用 controllerAs,在 ui-bootstrap 中,您应该只使用 controller: myModalController as vm(或者在你的情况下是 ctrl)。

  2. 但是在您的指令中,您定义了 controllerAs: 'ctrl', 但稍后您使用了 vm

  3. 在模态 Controller 中,您仅使用 $uibModalInstance.dismiss() 方法,dismiss 方法关闭模态并激活 uibModalInstance.result 的 promise 拒绝处理程序 promise 。您应该使用 $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

关于javascript - Angular UI bootstrap uibModalInstance.result 没有产生任何值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35642198/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com