dreyer
March 31, 2016, 7:11pm
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?
dreyer
March 31, 2016, 7:20pm
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
dreyer
April 1, 2016, 5:14pm
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;
}
dreyer
April 1, 2016, 6:07pm
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 )