以编程方式设置 Angular UI 模态高度和宽度

Question

In this plunk 我有一个 Angular UI 模式，它有一个相关的 class the-modal 来设置高度和宽度，它们最初设置分别在 300px 和 500px。

我需要的是在模式打开时以编程方式设置高度和宽度，例如 100px 和 200px。

我不能使用 ng-class，因为我希望用户能够定义高度和宽度。例如，下面的 newHeight 和 newWidth 将从数据库中获取并用于设置模态尺寸。有什么想法可以实现吗？

Javascript

var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope,$uibModal) {


  /*
  * these values are taken from a database
  * and should be used to set the height and width of the modal
  */
  var newHeight = 100;
  var newWidth = 200;


  $scope.open = function () {
    var modalInstance = $uibModal.open({
          animation: false,
          windowClass: 'the-modal',
          templateUrl: 'myModalContent.html'
        });

    };

});

HTML

    <style>
      .the-modal .modal-content{
          width:500px;
          height:300px;
      }
   </style>


  </head>

  <body ng-app="app" ng-controller="ctl">

    <script type="text/ng-template" id="myModalContent.html">
        <p>Some content</p>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

   </body>

Answer 1

将高度和宽度注入模态控制器并使用 ngStyle，它将添加到您可能已经使用 css 应用的任何样式。

JS:

var newHeight = 400;
var newWidth = 200;

$scope.open = function () {
    var modalInstance = $uibModal.open({
        animation: false,
        windowClass: 'the-modal',
        templateUrl: 'myModalContent.html',
        resolve: {
          height: newHeight,
          width: newWidth
        },
        controller: function($scope, height, width) {
          $scope.height = height;
          $scope.width = width;
        }
});

HTML:

<script type="text/ng-template" id="myModalContent.html">
<div ng-style="{height: height + 'px', width: width + 'px'};">
    <p>Some content</p> height: {{height}}, width: {{width}}
</script>

Forked plunk

Answer 2

嗯，向你的 CSS 添加一个新的样式表行怎么样，你将用于你的弹出模式；

var app = angular.module("app", ['ui.bootstrap']);
    app.controller("ctl", function($scope,$uibModal) {

      /*
      * these values are taken from a database
      * and should be used to set the height and width of the modal
      */
      var newHeight = 100;
      var newWidth = 200;

    var style = document.getElementsByTagName("style")[0];

      $scope.open = function () {
      style.sheet.insertRule(".the-modal-changed .modal-content { height: "+newHeight+"px; width: "+newWidth+"px; background:red; }", 0);

        var modalInstance = $uibModal.open({
              animation: false,
              windowClass: 'the-modal-changed',
              templateUrl: 'myModalContent.html'
            });

        };

    });

所以我得到了当前样式标签的内容，并添加了一个新的样式，规则是.the-modal-changed .modal-content { height: "+newHeight+"px; width: "+newWidth+"px; background:red; }

这样，the-modal-changed class 将是您要用于模态的 class。所以我将模型的 windowClass 属性更改为此。

工作得很好，但由于我确定您正在做的事情比您的演示显示的更复杂，所以不确定它是否适合您的情况。我还把背景设为红色来演示。

Here is the forked plunker.

Answer 3

如果可能，将您的控制器移动到 html 标签级别，例如 this plunker。然后你的样式标签可以动态改变。

   <style>
      .the-modal .modal-content{
          width:{{dimension.newWidth}}px;
          height:{{dimension.newHeight}}px;
      }
   </style>

否则，您可以创建一个调整父元素大小的指令，如 this plunker。

标记：

<script type="text/ng-template" id="myModalContent.html">
  <div parent-dimension="" parent-width="{{vm.width}}" parent-height="{{vm.height}}">
    <p>I am {{vm.width}}px wide and {{vm.height}}px high</p>
  </div>
</script>

JS:

app.directive('parentDimension', [function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            var setDimension = function(dimension, val) {
                val = val && parseInt(val);
                if (val) {
                  // Set the dimension of the parent element
                    elem[0].parentNode.style[dimension] = val + 'px';
                }
            };

            // Watch for changes in width and set accordingly
            attr.$observe('parentWidth', function(newVal) {
                setDimension('width', newVal);
            });

            // Watch for changes in height and set accordingly
            attr.$observe('parentHeight', function(newVal) {
                setDimension('height', newVal);
            });
        }
    }
}]);

Answer 4

可能不是最好的解决方案，但我认为它可以解决您的问题。

我创建了带有硬编码 height/width 值的指令 adjustModal，但您也可以传递它们。如果将此指令放在模态模板中的第一个元素上，则父元素将为 .modal-content，因此您可以直接使用 jqLite.

更改 width/height

模态模板：

<script type="text/ng-template" id="myModalContent.html">
    <div adjust-modal>
      <p>Some content</p>
    </div>
</script>

指令：

app.directive('adjustModal', function() {
      return {
        link: function (scope, element) {
          var height = '100px';
          var width = '100px';
          element.parent().css("width", width)
          element.parent().css("height", height)
        }
      }
    });

working plunker

以编程方式设置 Angular UI 模态高度和宽度

Set Angular UI Modal height and width programmatically

angularjs

angular-ui

angular-ui-bootstrap