使用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

实际上还有另一种选择,我觉得"更干净".在传递给show方法的对象中,您还可以为弹出窗口定义一个css类,这样您就可以使用它来覆盖默认的离子样式.

专门针对您的用例:

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

并在对象中使用传递给show方法添加:

cssClass: "popup-vertical-buttons"

Answer 2

对于任何有兴趣的人,这就是我做的...

在buttons属性之前,添加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;
}