使用 ionicPopup.show 在弹出窗口中将按钮移动到彼此下方

Question

我使用

创建了这个弹出窗口

        $ionicPopup.show({
        title: 'Choose Location...',
        buttons:[
            {
                text: "Current Location",
                type: 'button-positive',
                onTap: function(){
                    $scope.myLocation();
                }
            },
            {
                text: "Previous Locations",
                type: 'button-positive',
                onTap: function(){
                    $state.go('menu.listSelect');
                    //go to choose location page
                }

            },
            {
                text: "Address Book",
                type: 'button-positive',
                onTap: function(){

                    //go to address book
                }
            },
            {
                text: "Cancel",
                type: 'button-positive',
                onTap: function(){
                    console.log('cleek');
                    $scope.fillOptionPopup.close();
                }
            },
        ]

    });
};

这会将创建的按钮像这样并排放置

有没有办法使用为弹出窗口创建按钮的格式来制作按钮，使其横跨弹出窗口的宽度并且每个按钮都在新的一行上？

我用这段代码代替了按钮数组，它给了我这个，这就是我想要的。但是 ng-click 并没有调用我从数组的 ontap 中创建的函数。

template:   '<button class="button button-positive" ng-mousedown="goMyLocation()">Current Location</button><br>'+
'<button class="button button-positive" ng-mousedown="goMenuList()">Previous Locations</button><br>'+
'<button class="button button-positive" ng-mousedown="goAddressBook()">Address Book</button><br>'+
'<button class="button button-positive" ng-mousedown="closePopup()">Close</button>'

有没有一种方法可以让按钮成为每行一个按钮并占据整个弹出窗口的宽度？

Answer 1

好的，既然我已经阅读了整个问题，我可以为您提供帮助。由于默认的弹出布局

，如果不修改弹出窗口 CSS，第一个代码片段将永远不会执行您想要的操作

为了使第二个布局起作用（使用模板），您需要将范围参数传递给弹出窗口，以便按钮链接到包含功能的范围

https://ionicframework.com/docs/v1/api/service/$ionicPopup/

Answer 2

实际上我发现了另一个选项 "cleaner"。在传递给 show 方法的对象中，您还可以为弹出窗口定义一个 css class，因此您可以使用它来覆盖默认的离子样式。

专门针对您的用例：

.popup-vertical-buttons button
{
    min-width: 100%;
    margin-bottom: 5px;
}
.popup-vertical-buttons .popup-buttons
{
    display: block;
}

并在对象中使用传递给显示方法添加：

cssClass: "popup-vertical-buttons"

Answer 3

对于任何感兴趣的人，我就是这样做的...

在按钮属性之前，添加 cssClass: 'popup-vertical-buttons' 使其看起来像这样：

$ionicPopup.show({
 tite: 'Some Title',
 cssClass: 'popup-vertical-buttons',
 buttons: [
  ...
]
});

然后在你的 CSS 添加这两行：

.popup-vertical-buttons .popup-buttons {
  display: block;
}
.popup-vertical-buttons .popup-buttons .button{
  display:block;
  min-width: 100% !important;
}

使用 ionicPopup.show 在弹出窗口中将按钮移动到彼此下方

Move buttons below each other in popup using ionicPopup.show

javascript

angularjs

ionic-framework