关于angularjs：以编程方式设置Angular UI Modal高度和宽度


Set Angular UI Modal height and width programmatically

在这个小sprite中，我有一个Angular UI模态，该模态有一个相关的类the-modal来设置高度和宽度，它们最初分别设置为300px和500px。

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

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

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <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>
   

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

   </body>
相关讨论

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

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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：

1
2
3
<script type="text/ng-template" id="myModalContent.html">

    <p>Some content</p> height: {{height}}, width: {{width}}

叉形塞

相关讨论

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

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

模式模板：

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

指令：

1
2
3
4
5
6
7
8
9
10
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)
        }
      }
    });

工作塞子

如果可能的话，将您的控制器向上移动到html标签级别，例如此插销器。然后，您的样式标签可以动态更改。

1
2
3
4
5
6
   <style>
      .the-modal .modal-content{
          width:{{dimension.newWidth}}px;
          height:{{dimension.newHeight}}px;
      }
   </style>

否则，您可以创建一个指令来调整父元素的大小，例如：punker。

标记：

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

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);
            });
        }
    }
}]);
相关讨论

哼，将新的样式表行添加到将用于弹出模式的CSS上怎么办；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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属性更改为此。

工作正常，但由于我确定您所做的事情要比您的演示显示的事情复杂，因此不确定是否适合您的情况。另外，我将背景设为红色。

这是分叉的矮人。

相关讨论