Question

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

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

任何帮助将不胜感激。

Answer 1

ui-bootstrap 提供的$uibModalStack工厂可能会添加

id 属性：

$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 可以从模板传递：

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

另请注意，您可以使用$uibModal.open()函数的 windowTopClass 或 windowClass 属性，这些类也将添加到顶层模式级别，所以你也可以将它们用于独特的选择器。

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

Answer 2

无法添加＆＃34; id＆＃34;属性Ui Bootstrap模态弹出

但你可以管理使用初始化$ uibModal的变量，在你的情况下它是var modalInstance

以下是可能有用的参考文献。

//Model Popup for e.g login User
var loginUser= $uibModal.open({
  .....
   ....
});

loginUser.result.then(function () {
 //Write your on success 
}, function () {
  //Write your code when model close event
});

//Other Model Popup for register User
var registerUser= $uibModal.open({
  .....
   ....
});

registerUser.result.then(function () {
 //Write your on success 
}, function () {
  //Write your code when model close event
});

希望我已经回答了你的问题

将属性Id设置为uibModal

2 个答案: