backdrop is not working, ideas?

[lfreneda]

:disappointed:

[ennedigi]

Did you try with version 1.4? @lfreneda

[lfreneda]

@ennedigi yes.

The problem is that I'm using ionic with cached views, so multiples ion-view elements and multiples ion-content lives on dom. So, var a = angular.element(document.querySelector('ion-content')).append(el[0]); as implemented will not work for all menus

I'm trying to fix it creating a backdrop for each menu, but Angular is not rendering the way I would like to.

Can you help me out?

On directive function:

    function ionFloatingMenu() {
        return {
            restrict: 'E',
            scope: {
                menuOpenColor: '@?',
                menuOpenIcon: '@?',
                menuOpenIconColor: '@?',
                menuColor: '@?',
                menuIcon: '@?',
                menuIconColor: '@?',
                hasFooter: '=?',
                backdrop: '=?',
                bottom: '@?'
            },
            template: '<ul id="floating-menu"  \n\
                            ng-style="{\'bottom\' : \'{{bottom}}\'}" \n\
                            ng-class="{\'active\' : isOpen}" \n\
                            ng-click="open()">' +
                    '<div ng-transclude></div>' +
                    '<span><li class="menu-button icon menu-icon" ng-class="icon" ng-style="{\'background-color\' : buttonColor, \'color\': iconColor}"></li></span>' +
                    '</ul>',
            replace: false,
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude)
            {
                element.find('div').replaceWith(transclude());
            },
            controller: ionFloatingMenuCtrl
        };
    }

I just inserted the backdrop div before ul:

 template: '<div class="backdrop"></div><ul id="floating-menu"  \n\

My looks like angular is ignoring it, do you know why? :fearful: the div is not being rendered on dom :cry:

My idea is simple: with backdrop div on my directive I can control added classes with ng-class and also can implement a close menu when clicking on it.

[ennedigi]

Mmm, I see your point @lfreneda

I had some issues with the backdrop previously because the node backdrop should be outside the ion-content to behave propertly.

However you would like to have several backdrop. I think that the soulution should be to have a unique backdrop node for all views, and this node shoul be outside all of them.

Try to edit the angular.element(document.querySelector('ion-content')).append(el[0]); and append el[0] to a element outside all views.

[cuongnguyen149]

@lfreneda Did you solve this issue?

[lfreneda]

@cuongnguyen149 I made some changes.. and it is working as expected (at least on my app), not really sure if will work for all cases.. anyway, I will open a pull request later..

I also fixed others minors bugs.. in the meatime you can check it out here: https://gist.github.com/lfreneda/67f28cc152951c0a54f551ab30c80dc6

[lfreneda]

@cuongnguyen149 let me know if works for you :stuck_out_tongue_winking_eye:

[cuongnguyen149]

@lfreneda Yeah! It's working right now. Thank you. But when I click on the back-drop, the menu is not close.

[lfreneda]

@cuongnguyen149 same here.. back-drop is not on scope of floating-menu, so is not possible to catch click events.. I'll try to implement a fix for it later..

@ennedigi can you help? Should I pull request my changes to you?

[ennedigi]

@lfreneda Yes, sure. you can send me a pull request!