javascript - 使用 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 类，这样您就可以使用它来覆盖默认的 ionic 样式。

专门针对您的用例:

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

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

cssClass: "popup-vertical-buttons"