Программная установка угловой высоты и ширины пользовательского интерфейса

В этом паке у меня есть модальный интерфейс Angular UI, который имеет связанный класс 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>
Источник

4 ответа

Решение

Возможно, это не лучшее решение, но я думаю, что оно решит вашу проблему.

Я создал директиву 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)
        }
      }
    });

рабочий плункер

Источник

Введите высоту и ширину в ваш модальный контроллер и используйте 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>

Раздвоенный планк

Источник

Если возможно, переместите свой контроллер до html Уровень тега, как этот поршень. Тогда ваш тег стиля может динамически меняться.

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

В противном случае вы можете создать директиву, которая изменяет размер родительского элемента, как этот элемент.

Разметка:

<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);
            });
        }
    }
}]);
Источник

Хм, а как насчет добавления новой строки таблицы стилей в ваш 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 класс будет классом, который вы хотите использовать для вашего модального. Поэтому я изменил свойство windowClass модели на это.

Работает просто отлично, но, поскольку я уверен, что вы делаете что-то более сложное, чем то, что показывает ваше демо, не уверен, сработает ли это для вашей ситуации. Также я сделал фон красным для демонстрации.

Вот раздвоенный поршень.

Источник
Другие вопросы по тегам