Develop Reference

outside click is not working in angularjs

I have a button. If i click that button one popup will open in Navbar. I am using ui-bootstrap for this.
If I click outside the popup is not closing.
I wrote window.onclick function to achieve this. It is working.
But My problem is, If I click button popup will open. If I select any value in dropdown, on top of that one more popup will open.
So If I select any dropdwon value on the second dropdown, the first dropdown is automatically closing.
My need is, When I click button dropdown should open. and If I click outside the dropdown close.
If I select any value from dropdown, the dropdown should stable. It should not go off. Only when I click outside that time only it should go.
<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">&nbsp&nbspFilter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
<div class="dropdown-menu">
<div class="dropdown-item" ng-repeat="filter in filters">
<div>{{filter.filterObject}}</div>
</div>
</div>
</li>
window.onclick = function() {
$(".dropdown-menu").hide();
}
If I click button, the dropdown should not go.

This is how you can do, again this is not ideal way to do it, since we have little data provided by you, I can only think of this kind of fix :)
window.addEventListener("click", function(event) {
if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) {
$(".dropdown-menu").hide();
}
});
EDIT 1
Just add a parent div and keep a unique class for dropdown-parents which you don't want to close
suppose class name is dropdown-select
and then just edit the condition like this
if (!$(event.target).hasClass('dropdown-select') &&!$(event.target).parents().hasClass('dropdown-select')) {

You should add an extension to the jquery library then add this script since you are using javascript
<script>
$( document ).ready(function() {
$(".dropdown-menu").hide();
});
</script>

Prevent default click action based on another class existing on the page

I have the following CSS code that when the .dashboard-actions class is clicked opens up a dropdown menu. Once clicked the 2nd div in the tree .dropdown changes to class="dropdown open" (indicates the dropdown menu is open/visible), once the user clicks off the open class is removed and the dropdown menu disappears (as expected).
I want to be able using some form of javascript (AngularJS 1.3 or jQuery) be able to do some logic to recognise when the dropdown is 'open' - if so, if a user clicks anywhere else on the screen, for instance the href below the div it will open 'close' the dropdown by removing the 'open' class rather than doing that default action, how could I best approach this?
<div class="dashboard-actions ellipsis">
<div class="dropdown" stop-event>
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<div>
<div ng-include src="'templates/menu.html'" ng-repeat="x in item.x"></div>
</div>
</ul>
</div>
</div>
<div class="interaction-body">
<a href="https://somecdn.com/t51.2885-15/aaa.jpg" ng-href="https://somecdn.com/t51.2885-15/aaa.jpg" target="_blank" stop-event="">
<img ng-src="https://somecdn.com/t51.2885-15/aaa.jpg" src="https://somecdn.com/t51.2885-15/aaa.jpg"></a>
</div>

Hope you are searching for this
//Some code
$('.dropdown-menu').each({
if($(this).hasClass('open')){
// Do something
// $(this).removeClass('open');
}
});
//More code

How can I make a dropdown menu open with a keydown event?

Im using a bootstrap example of a dropdown menu. It opens and closes just how it should with a mouse click. I'm wondering how can I configure this code to mimic the same functionality when using the keyboard?
I don't want to create a new custom control. By hitting "tab" I can move from one focusable element to another.
What I've tried:
I've attached the role="button" attribute, as well as a tabindex=0. When I hit tab until i get to the dropdown menu icon (chevron-down), It opens up the menu when I hit the spacebar. However I cant close the dropdown menu, rather it stays open. Can anyone share any ideas on how to open and close this menu?
<div class="appExperience small-tile">
<div class="blue-bar">
<h2 class="tile-header">APPLICATION EXPERIENCE</h2>
<span class="dropdown hidden-xs">
<i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle"
role="button"
aria-labledby="Expand Application Experience Summary Dropdown Menu"
ng-src="{{dropdown_appExperience}}"
data-toggle="dropdown"
tabindex="0"
alt="Expand Application Experience Summary Dropdown Menu"></i>
<ul class="dropdown-menu appExperience tileContextMenu">
<li>
List Item 1
</li>
<li>
List Item 2
</li>
...

Ultimately, you can trigger a click event from JavaScript. If you're familiar with jQuery, you can do for instance:
$(window).on("keydown", function(){ $(".dropdown").trigger("click") });

Listening for a click anywhere on the page without jQuery

I have a dropdown menu which toggles on click, and I've gotten rid of jQuery completely so that I can toggle the menu using just AngularJS. The problem is that if the dropdown section is visible, then you have to click the button again to hide it. So the only way to toggle the menu is to use the button right now, and I want users to be able to close the menu by simply clicking somewhere on the page that isn't the menu.
So here's my code right now:
<button type="button" class="btn btn-nav dropdown-toggle" aria-expanded="false" ng-click="showMenu = !showMenu">
{{ getNavTitle() | translate }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-class="{ show: showMenu === true }">
<li>
<a id="hottest" ng-click="nav.replaceTo('/one')" ng-class="{active: subnav === 'top'}"><big>{{ 'subnav-one' | translate }}</big></a>
</li>
<li>
<a id="latest" ng-click="nav.replaceTo('/two')" ng-class="{active: subnav === 'latest'}"><big>{{ 'subnav-two' | translate }}</big></a>
</li>
<li>
<a id="friends" ng-click="nav.replaceTo('/three')" ng-class="{active: subnav === 'fans'}"><big>{{ 'subnav-three' | translate }}</big></a>
</li>
</ul>
AngularJS:
$scope.showMenu = false;
So this works. With jQuery I would just listen for a tap somewhere on the page which wasn't one of the three drop down links and the toggle button, and close the menu. But with AngularJS, I'm unsure how to go about doing that.

I guess you're using bootstrap. You could use angular-bootstrap or the bootstrap.js itself. I think the auto close feature should already be implemented there.
If you wanna implement it yourself add a click event handler, which closes the menu, to the body with 'once', so the handler will be executed once and then removed from the event listeners.

how to stop page scroll every time I update my angular view

My page is scrolling every time I update part of my model that is bound to my view. I think when the view updates, the page scrolls. How do I eliminate this behavior?
Here is an example of a drop down. Every time an item on the dropdown is selected, I update the model. Then, the page scrolls:
<div class="header_item btn-group" dropdown is-open="dd8.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
<span>{{a.Summaries[a.summaryIdShown].AgeSpecified}}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu accordion_item" role="menu">
<li>Adult</li>
<li>Pediatric</li>
<li>Both</li>
</ul>
</div>
Thanks in advance.

This is what makes the page scrolling: href="#" . The pawn symbol in href attribute means: scroll to the top. To fix that, just set to href="javascript:void(0)".

In Angular, href="#" does not prevent the default click action because is a directive which is what is causing the reload for you <a href=''..> should solve your problem. The docs for the anchor tag directive can be found here