как динамически скрывать/показывать ионные всплывающие кнопки

Я работаю над своим первым большим ионным проектом и застрял. Может у кого-нибудь есть идея, как динамически скрывать и показывать кнопки в ионном всплывающем окне? Мне нужно, чтобы кнопки изначально были скрыты, но затем, после того, как что-то произойдет, кнопки должны появиться. Есть идеи, как это сделать?

Пытаясь объяснить дальше, здесь требуется предоставить угловые директивы внутри кнопок $ionicPopup. например

 buttons: [{
            text: 'Cancel'
        }, {
            text: '<b ng-disabled="user.length<1">Delete</b>',
            type: 'button-crimson'
    }]

Но ng-disabled="user.length‹1" обрезается при отображении всплывающего окна.


ionic-framework ionic-popup
person zi88    schedule 08.01.2016    source источник
comment
можешь выложить то, что у тебя сейчас есть?   -  person PrinceG    schedule 08.01.2016
comment
а что после того, как что-то случилось..? что за акция..?!   -  person the_mahasagar    schedule 08.01.2016
comment
Привет, PriceG, the_mahasagar. Я реализую код отсюда: github.com/lkatney/ProfileImageUpload-AngularJS. Модуль плагина открывает всплывающее окно, а затем предлагает пользователю выбрать файл, используя скрытый тег ‹input type=file ...›. Затем выбранный файл отображается непосредственно в открывшейся всплывающей панели. После завершения рисования изображения (вызов onLoadDone) я хотел бы показать всплывающие кнопки с конкретными вариантами действий. Эти кнопки и эти действия не должны быть доступны или видны до завершения рисования.   -  person zi88    schedule 08.01.2016
comment
извините за опечатку PrinceG   -  person zi88    schedule 08.01.2016

Ответы (3)


arrow_upward
1
arrow_downward

Если вы все еще ищете ответ на этот...

Я создал переменную для своего массива кнопок

var buttons = [{...}, {...}]

Затем назначит это объекту во всплывающем окне.

$ionicPopup.show({
    templateUrl: 'templates/pop-up.html',
    title: 'My Popup',
    subTitle: 'stuff,
    scope: $scope,
    **buttons: buttons,**

А затем изменил бы этот массив

buttons.splice(0, 1, {/*new button*/})

Я не проверял его, но он также может работать, если вы хотите отредактировать заголовок или класс.

buttons[0].type = 'newCssClass';
person 814k31    schedule 07.02.2018
comment
Кстати, я нашел еще одно решение, которое может оказаться полезным для вас или других: я полностью исключил раздел кнопок из всплывающего окна (или модального окна), из-за чего ionic не отображает свои кнопки или не использует логику своих кнопок. Вместо этого я поместил flex-box во всплывающее тело модального окна с колонкой направления и создал свои собственные кнопки со своей собственной логикой в ​​качестве нижнего элемента этого всплывающего тела. Теперь эти кнопки управляются моим кодом, и я могу делать с ними все — скрывать, отключать, изменять текст, специальные эффекты и т. д., и все это в коде, управляющем логикой модального окна. Никаких ограничений. - person zi88; 26.02.2018

arrow_upward
0
arrow_downward

Мой обходной путь заключался в том, чтобы поместить динамические кнопки в шаблон всплывающего окна, а не в массив кнопок. Это не идеально, но это сработает.

eg:

addPopup = $ionicPopup.show({
        templateUrl: 'templates/pop-up.html',
        title: 'My Popup',
        subTitle: 'stuff,
        scope: $scope,
        buttons: [{
                text: 'Cancel',

А затем в pop-up.html вы можете делать свои обычные угловые ng-if/ng-hide/ng-disabled/etc, как обычно. Недостатком является то, что эти кнопки не будут отображаться внизу, где идут кнопки в массиве, но с некоторой работой со стилем вы можете сделать так, чтобы они все еще выглядели красиво.

person Eric    schedule 16.08.2016

arrow_upward
-1
arrow_downward

Должно быть легко использовать переменные $scope и ng-hide/ng-show

function something_happens(){
  $scope.it_happened = true;
}

<button ng-show="it_happened">Qlik Me</button>

Кнопка будет отображаться, только если $scope.it_happened == true

person errata    schedule 08.01.2016
comment
большое спасибо, но я не об этом спрашивал. Ваш ответ для привязки обычных html-кнопок (или элементов) к angular. Кнопки Ionic Popup отличаются друг от друга, они определены в коде JS в массиве кнопок как часть объекта всплывающего окна, см. ionicframework.com/docs/api/service/$ionicPopup . Каждый элемент в массиве кнопок представляет собой объект с текстом, типом (который является классом) и функцией onTap. Что нам нужно, так это способ привязать их к остальной части кода JS/Angular, сделать ng-hide или ng-show (или иным образом изменить их стиль) ПОСЛЕ того, как всплывающий объект был запущен popup.show(). - person zi88; 09.01.2016
comment
Ответ не отражает фактический запрос, а упоминает совершенно другую концепцию, о чем также упоминается в комментарии выше. - person user1242321; 17.06.2017