Question

In this plunk我有一个Angular UI模式，它有一个相关的类=OR(G11=Setup!$E$447:$E$449)来设置高度和宽度，它们最初分别设置为the-modal和300px。

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

我不能使用200px，因为我希望用户能够定义高度和宽度。例如，下面的ng-class和newHeight将从数据库中获取并用于设置模态维度。任何想法如何使这项工作？

的Javascript

newWidth

HTML

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

    };

});

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

如果可能，请将您的控制器移至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 3

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

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

模态模板：

<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

Answer 4

嗯，如果要为你的弹出模式添加一个新的样式表行呢？

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类将是您要用于模态的类。所以我将模型的windowClass属性更改为。

工作得很好，但是因为我确定你正在做一些比你的演示更复杂的东西，不确定它是否适用于你的情况。我还将背景设为红色以示范。

Here is the forked plunker.

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

4 个答案: