Set Angular UI Modal Höhe und Breite programmatisch

In this plunk ich eine Angular UI Modal haben, die eine verwandte Klasse hat the-modal die Höhe und die Breite zu setzen, werden sie zunächst auf 300px und 500px festgesetzt.Set Angular UI Modal Höhe und Breite programmatisch

Was ich brauche, ist die Höhe und die Breite programmgesteuert einzustellen, wenn das Modal geöffnet ist, sagen wir bei 100px und 200px.

Ich kann ng-class nicht verwenden, wie ich möchte, dass der Benutzer die Höhe und Breite definieren kann. Zum Beispiel werden newHeight und newWidth unten aus einer Datenbank genommen und verwendet, um die modalen Dimensionen festzulegen. Irgendwelche Ideen, wie das funktioniert?

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>

Quelle

2017-01-26 ps0604

'Ich möchte der Benutzer in der Lage sein, die Höhe zu definieren und width.' wie? – svarog

Die Höhe und Breite werden in einer Datenbank gespeichert. Wenn das Modal geladen wird, werden die Werte übernommen und gesetzt. Ich habe das Plunker angepasst, um klarer zu sein. – ps0604

Eine Sache, die Sie _could_ tun können, ist programmgesteuert ein style-Tag mit der Breite und Höhe zu generieren, und zuweisen Sie das modale eine Klasse, die Sie auch in das style-Tag einfügen. Dann musst du nur das Style-Tag auf dem Dom bereinigen, wenn sich das Modal schließt. – Seiyria

die beste Lösung nicht sein, aber ich denke, es ist Ihr Problem löst.

Ich erstellte Direktive adjustModal mit hardcoded Höhe/Breite Werte, aber Sie können sie auch übergeben. Wenn Sie diese Anweisung auf das erste Element in der modalen Vorlage setzen, lautet das übergeordnete Element .modal-content. Sie können die Breite/Höhe direkt mithilfe von jqLite ändern.

modal Vorlage:

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

Richtlinie:

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

Quelle

2017-02-01 09:06:09

Injizieren Sie die Höhe und Breite auf Ihre modal-Controller und verwenden ngStyle, wird es zu jedem Stil hinzufügen, die Sie bereits anwenden können mit 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

Quelle

2017-01-27 14:06:54 svarog

danke, aber es scheint nicht zu funktionieren. es ändert die "Inhalt" Höhe/Breite, und ich muss die "modale" Höhe/Breite ändern. Außerdem fehlt das abschließende 'div'. – ps0604

vielleicht 'windowTemplateUrl' ist was du suchst? http://stackoverflow.com/questions/24696224/angular-ui-bootstrap-modal-use-custom-modal-window – svarog

Hum, was ein neues Stylesheet Zeile in die CSS hinzufügen, die Sie für Ihre Popup-modal verwenden werden;

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

     }; 

    });

So bekomme ich den Inhalt des aktuellen Stil-Tag und hat einen neuen Stil mit der Regel .the-modal-changed .modal-content { height: "+newHeight+"px; width: "+newWidth+"px; background:red; }

Auf diese Weise wird the-modal-changed Klasse die Klasse, die Sie für Ihre modal verwenden möchten. Also habe ich die windowClass-Eigenschaft des Modells geändert.

Funktioniert gut, aber da bin ich sicher, dass Sie etwas Komplexeres tun, was Ihre Demo zeigt, nicht sicher, ob es für Ihre Situation funktionieren würde. Auch habe ich den Hintergrund zur Demonstration rot gemacht.

Here is the forked plunker.

Quelle

2017-01-31 05:27:13

Ihre Lösung funktioniert auch, aber ich kann nur eine Antwort akzeptieren – ps0604

Wenn möglich, bewegen Sie Ihren Controller wie this plunker zum html Tag Ebene. Dann kann sich Ihr Style-Tag dynamisch ändern.

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

Andernfalls können Sie eine Richtlinie erstellen, die das übergeordnete Element wie this plunker ändert die Größe.

Markup:

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

Quelle

2017-02-01 05:30:47 user2718281

Ihre Lösung funktioniert auch, aber ich kann akzeptieren nur eine Antwort – ps0604

Set Angular UI Modal Höhe und Breite programmatisch

Antwort

Verwandte Themen