Ionicmodal children DOM manipulation

#1

Hello.

I getting in trouble trying to add a click event for an element in my modal…
Its inside a directive to avoid repeat the same code on each controller. Thats why I wanna set the click here too, to avoid create the same clickevent in every controller.

$ionicModal.fromTemplateUrl(‘views/modal-info/’+view, {
scope: $scope,
animation: ‘slide-in-up’
}).then(function(modal) {
$scope.modal = modal;
modal.show();
modal.$el.find(‘fieldset’).on(“click”, function(event){
console.log(event);
});
});

if I console.log($el), I can navigate through childNodes until the fieldset I want, but the .find() never finds anything. No matter what I try to find (I tried with also with the same result).

What am I doing wrong? Or is there another good way to make it?

#2

found it!

I tried alot before post, just cuz I asked help I found it =P

I need to .find(), inside a .ready() function.

                modal.$el.ready(function() {
                    modal.$el.find('fieldset').on("click", function(event){
                        console.log(event);
                    });
                });

thx

#3

I´m having a new issue with the same topic, I guess. Let me know if I need to open another one.

Heres the final code I Have now:

        modal.$el.ready(function() {
            var element = modal.$el.find('fieldset');
            element.on("click", function(event){
                var divAnimation = element.find('div');
                var elementToChange;
                var elementToCompare;

                //legend click
                if(event.path[1].tagName == 'FIELDSET'){
                    elementToChange = event.path[1];
                    elementToCompare = event.srcElement.parentNode.childNodes[3];
                } else { //fieldset click
                    elementToChange = event.path[0]
                    elementToCompare = event.srcElement.childNodes[3];
                }

                angular.forEach(divAnimation, function(value, key) {
                    if(value == elementToCompare) {
                        if(elementToChange.className == "contentShow") {
                            elementToChange.className = "contentHide";
                            elementToCompare.style.height = '0';
                        } else {
                            elementToChange.className = "contentShow";
                            elementToCompare.style.height = elementToCompare.scrollHeight+'px';
                        }
                    }
                });
            });
        });

the problem is, at the first time I click the fieldset, my animations don’t work, after that the animation is ok.
Its just a simple toogle to hide and show the content inside the fieldset.

maybe its just a css problem. Or maybe is the way ionic / angular do the things and the way I coded… I have no idea. Any help?

(here’s the css)

.modal-info fieldset {
height: auto;
overflow: hidden;
}

.modal-info fieldset.contentShow .div-to-hide {
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.modal-info fieldset.contentHide .div-to-hide {
overflow: hidden;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}

#4

OK, only logic issues.

Just to register, heres the corrected code.

        modal.$el.ready(function() {
            var element = modal.$el.find('fieldset');
            var divsAnimation = element.find('div');
            element.on("click", function(event){
                var elementToChange;
                var elementAnimated;

                //se clicar na legenda
                if(event.path[1].tagName == 'FIELDSET'){
                    elementToChange = event.path[1];
                    elementAnimated = event.srcElement.parentNode.childNodes[3];
                } else { //se não, clicou no fieldset
                    elementToChange = event.path[0]
                    elementAnimated = event.srcElement.childNodes[3];
                }

                angular.forEach(divsAnimation, function(value, key) {
                    if(elementToChange.className == "contentShow") {
                        elementToChange.className = "contentHide";
                        elementAnimated.style.height = '0';
                    } else {
                        elementToChange.className = "contentShow";
                        elementAnimated.style.height = elementAnimated.scrollHeight+'px';
                    }
                });
            });
            angular.forEach(divsAnimation, function(value, key) {
                if(value.parentNode.className == "contentHide") {
                    value.style.height = '0';
                } else {
                    value.style.height = value.scrollHeight+'px';
                }
            });
        });

Its a generic modal for my use case, animations will not work for a different set of html.
(close it, all done :slight_smile:)