以编程方式确定 Angular UI 模态高度

Question

In this plunk 我有一个 Angular UI 模态，带有一个应显示模态高度的警报弹出窗口。相反，它显示一个空变量。哪里出错了？

HTML

 <div the-modal></div>

Javascript

var app = angular.module("app", ['ui.bootstrap']);

app.controller("ctl", function($scope, $compile) {});


app.directive("theModal", function($uibModal, $timeout) {
  return {
    restrict: "AE",
    scope: true,
    link: function(scope, element, attrs, ctrl, transclude) {

        scope.instance = $uibModal.open({
          animation: false,
          scope: scope,
          template: 'Some Text',
          appendTo: element
        });

        $timeout(function(){
          alert("Modal height is: " + element.css("height"));
        },500);

    }
  }
});

Answer 1

内容已放置在 div 内，modal-dialog class 位于指令模式占位符元素内。所以理想情况下，您应该查看 element 的内部 modal-content class.

element[0].querySelector('.modal-dialog').offsetHeight

以编程方式确定 Angular UI 模态高度

Determining Angular UI modal height programmatically

angularjs

angular-ui

angular-ui-bootstrap