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

对于任何有兴趣的人，我就这样做了......

在按钮属性之前，添加cssClass：＆＃39; popup-vertical-buttons＆＃39;所以它看起来像这样：

$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;
}

Answer 3

好的，现在我读了整个问题，我可以帮到你。由于默认的弹出布局

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

为了使第二个布局工作（使用模板），您需要将scope参数传递给弹出窗口，因此按钮链接到包含函数的范围

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

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

3 个答案: