gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 12:23:44 24 4
gpt4 key购买 nike

In this plunk我有一个 Angular UI 模式,它有一个相关的类 the-modal 来设置高度和宽度,它们最初设置为 300px500px 分别。

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

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

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>

最佳答案

将高度和宽度注入(inject)模态 Controller 并使用 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

关于angularjs - 以编程方式设置 Angular UI 模态高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41874924/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com