将属性 Id 设置为 uibModal

问题描述

我想知道是否可以将 Id 属性设置为通过 $uibModal 生成的模态，以便稍后我可以通过其 Id 捕获对应元素.我成功地生成了我需要的尽可能多的模态，尽管它们不是用以下代码唯一标识的:

I would like to know if it is possible to set an Id property to a modal generated through $uibModal so later I can capture the correspondent element by its Id. I successfully managed to generate as many modals as I need although they are not uniquely identified with the following code:

    var modalInstance = $uibModal.open({
        templateUrl: 'openChat.html',
        scope: $scope,
        backdrop: 'static',
        keyboard: false,
        controller: 'openChatModalCtrl',
        windowClass: 'chat-modal',
        size: 'sm'
    }).rendered.then(function () {
        console.log('there you go!');
    });

任何帮助将不胜感激.

推荐答案

id 属性可以由 ui-bootstrap 提供的 $uibModalStack 工厂添加em>:

id property may be added by $uibModalStack factory provided by ui-bootstrap:

$ctrl.open = function (size, windowTopClass, id) {
var modalInstance = $uibModal.open({
  ariaLabelledBy: 'modal-title',
  ariaDescribedBy: 'modal-body',
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  controllerAs: '$ctrl',
  size: size,
  windowTopClass: windowTopClass,
  windowTemplateUrl: 'my-window.html',
  resolve: {
    projects: function () {
      return $ctrl.projects;
    }
  }
}).rendered.then(function () {
  $uibModalStack.getTop().value.modalDomEl.attr('id', id);
});

注意 $uibModalStack.getTop().value.modalDomEl.attr('id', id); 行，这样 id 可以从模板中传递:

note $uibModalStack.getTop().value.modalDomEl.attr('id', id); line, this way id can be passed from the template:

<button type="button"
        class="btn btn-default"
        ng-click="$ctrl.open('lg', 'my-outer-class2', 'myID2')">Open me2!</button>

还请注意，您可以使用 $uibModal.open() 函数的 windowTopClass 或 windowClass 属性，这些类也将被添加到顶部模态级别，因此您也可以将它们用于唯一选择器.

also please note, that you can use windowTopClass or windowClass properties of the $uibModal.open() function, these classes will also be added to the top modal level, so you can also use them for unique selectors.

带有 2 个按钮的 plunker，应用了 2 个不同的 id 和 css 类:https://plnkr.co/edit/vMw1XtyNOED8PIDP0hWe?p=preview

plunker with 2 buttons applying 2 different ids and css classes: https://plnkr.co/edit/vMw1XtyNOED8PIDP0hWe?p=preview

这篇关于将属性 Id 设置为 uibModal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！