Hide element on click in Angular
I am new to writing a custom directive. I am trying to create something like a background (modal ui.bootstrap) in angular.
this is the fiddle I'm working on: LINK .
here's what i want: when the user clicks on the button (top left) the menu opens and i want to close it after clicking outside the menu.
Directive :
app.directive("Trigger", function () {
return {
restrict: 'C',
link: function (scope, element, attrs, event) {
element.click(function(){
if (e.target.id != "parentUl" && !$(e.target).closest("#rightMenu").length) {
$("#rightMenu").removeClass("noneStyle");
}
});
}
};
});
i don't know exactly if it is suitable for this case restrict: 'C'
. Thanks for helping me.
Running and reading comments in CSS http://jsfiddle.net/evqw2zhp/3/
JS:
app.directive("trigger", function () {
return {
restrict: 'C',
scope: '=noneStyle',
link: function (scope, element, attrs) {
$(element).click(function (e) {
$("#rightMenu").removeClass("noneStyle");
scope.noneStyle = false;
scope.$apply();
console.log(scope);
});
}
};
});
CSS
When bottom = 0, it will cover the whole screen due to left, right, top, bottom - all 0s and position = abs.
#CoverUpWholeScreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: auto;
z-index: 1; /*higher than normal element but low than right menu */
}
When the right menu expands, this will cover the entire screen
#CoverUpWholeScreen.show {
bottom: 0;
}
app.directive ("trigger", function () {Directive name must be: camelcase-> thisIsAValidDirectiveName but not Pasalcase: ThisIsWrong When you mark it in an HTML element, the name must be all inline and dash-separated: this-is-a -valid-directive-name
A: mark it with the attribute-> this-is-a-valid-directive- name = "aValueForScope" C: A: mark it with class-> class = "this-is-a-valid-directive-name" E: A: mark it with custom HTML element-> You can set the constraint: "ACE" or "CE", whatever the combination of tags you want right away.
the scope is quite complex, one-way binding, two-way binding, isolated scope, scope translation, no scope, etc. I'm not very familiar with how things are going, so ... I can't help you.
Tell us about the scope: '= noneStyle'. = is a symbol telling Angular to bind noneStyle as two data bindings. i.e .: when you update the value inside this directive, the source value in the parent scope (scope in the controller) will also be updated, vice versa. Setting it as 2-way data binding is important, otherwise the value won't sync.
CoverUpWholeScreen has a trigger class-> directive, when this directive-> click: remove the right menu class and update controller value. Since this is an out of scope operation (not something scope.xxx = "aaa" or executing a function in scope: scope.runFn ();), we need to call scope. $ Apply (); tell angular "hey i changed something, updated it for me".
The reason you have to make a dummy div, cover the entire screen, is because you don't want to check for the mouse click event every time to change the menu on the right and then remove the class.
And when you add elements to the body, that element blocks the background (div), so move the z-index a little, but not the highest one as it will also cover the right menu.
source to share
Get the menu id of the button on the click you want to show
@ViewChild('mobmenu') menu:any;
Write below in oninit component
this.renderer.listenGlobal('document', 'click', (event:any) => {
console.log(this.renderer);
if(!this.menu.nativeElement.contains(event.target)){
this.resclass="";
} else{
if(this.resclass=="mobile_menu")
{
this.resclass="";
}
else{
this.resclass="mobile_menu";
}
}
});
source to share