On my navigation bar, I have a dropdown menu that is only displayed on mobile devices. The issue I am facing is that when I click on a link in the dropdown menu, it takes me to another page without refreshing the entire page. However, the dropdown menu remains open even after clicking on a menu item.
I would like to close the dropdown menu when a menu link is clicked or when the route changes. How can I achieve this functionality using angularjs bootstrap?
If you want to update the route when clicking an option in a bootstrap dropdown menu, you can listen for the route change event:
For example, if you have a link that opens a tooltip:
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">The first choice!</a>
</li><li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">And another choice for you.</a>
</li><li ng-repeat="choice in items" class="ng-scope">
<a class="ng-binding">but wait! A third!</a>
</li>
</ul>;
$scope.$on('$routeUpdate', function(scope, next, current) {
$('html').trigger('click');
});
The method above will work, but continuously selecting the html element on every route change can cause reflow. It's better to create a directive for this purpose, as shown below:
<html hide-dropdown>
angular.module('App', []).
directive('hideDropdown', function() {
return {
restrict: 'A',
link: function(scope, element) {
scope.$on('$routeUpdate', function(scope, next, current) {
element.trigger('click');
});
}
}
});
Here's a handy trick I discovered for closing the menu:
$rootScope.$broadcast('locationChangeSuccess');
I recently encountered the same problem, and discovered that instead of utilizing the dropdown-toggle directive, there is now a different solution.
After updating to: angular v1.2.26 angular-ui-bootstrap 0.11.2 Bootstrap v3.2.0 it appears that the original issue has been resolved. The drop down menu now closes properly without needing to refresh the page.
My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...
Here are the two methods I have written in Typescript: async getCertURL(pol: string): Promise<string> { return await Api.getData(this.apiUrl + pol + this.certEndpoint, {timeout: 60000}).then( (response) => { return response.data.certUR ...
In my Angular project, I am utilizing three.js to load a simple .obj file and animate it on the canvas. Everything is functioning properly, but I find myself needing to explicitly check for null in my animate() function to determine if the model has been ...
I am working on a directive that utilizes three different templates: http://jsfiddle.net/edwardtanguay/pLrkya7r/4 These templates each contain a panel and I am aiming to add a header template that remains consistent across all of them, as shown below: & ...
As I work on developing a point-and-click test game, I've made significant progress by conducting thorough research and finding answers to various inquiries on Stack Overflow. However, I have encountered an issue that I can't seem to find any exi ...
My webpage layout is using the fantastic Twitter Bootstrap framework and I am trying to add a stylish CSS3 Box Shadow effect to a column. However, I have encountered an issue where the box shadow's 1px border is causing my second column to wrap onto ...
When it comes to adding a date picker control in Angular/Bootstrap, there are a few options available. Is there one that stands out as the "better" choice? After some research, here is what I have discovered: HTML 5 input type of date: Support varies ac ...
In my React project, I am faced with the challenge of needing to store important data that must be readily accessible across different parts of the application. However, I want to avoid using a global data structure to make it easier for unit testing and a ...
While working on a Gatsby site, I've found programmatically creating pages to be incredibly useful. Using the gatsby-node file to generate pages for different content categories is straightforward and efficient. However, I'm currently facing a ch ...
I am trying to utilize Node.js to serve a single HTML file and respond to a request on the same port. In addition to serving the HTML page, I also want to run a local command to display the output of that command. However, I am encountering errors and unab ...
Currently, I am in the process of developing a webpage that utilizes Highcharts to display some data. To ensure reusability, I have encapsulated the desired chart within a directive. 'use strict'; angular.module('statisticsApp') .dir ...
Currently facing an issue with testing my express server where I am anticipating a 200 response. However, upon running the test, an error occurs: Test server status 1) server should return 200 0 passing (260ms) 1 failing 1) Test server statu ...
I am currently working on developing a mobile application using PhoneGap for Android. One of the tasks I am trying to accomplish is setting the background of a div element to the photo captured using the device's camera. The camera functionality is w ...
My database structure is set up like this (simplified version): Collection: item_A -> Document: params = {someParameter: "value"} -> Document: user_01 -> Sub-collection: orders_item_A -> Document: order_AA ...
My Unique Component Creation Journey I have meticulously crafted a custom component to enhance the navigation of my application. The core structure consists of an ul element, with each li item dynamically generated based on the contents of the router&apo ...
Looking to design an eye-catching jQuery banner ad. The content is styled in the following way: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Open House : Banner Advertisements</title> ...
I am trying to set the value of my td element from my JavaScript JSON, but for some reason it doesn't seem to be working when I inspect the element. The HTML is functioning fine, it's just the value that isn't updating. I've tried chang ...
I currently have a basic CSS-styled modal that appears when a button is clicked using JavaScript. Here is the JavaScript code: <script> var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = ...
I recently came across an article on this site about porting a WebApp built in PhoneGap to Windows Phone 8. Intrigued, I decided to follow a Getting Started guide available here. In my project, I am utilizing Marionette.js and Cordova 2.3.0rc2. One specif ...
I have the following: Vue.component('times-updated', { template: '<span>Times Updated: {{ timesUpdated }}</span>', data: function() { return { timesUpdated: this.$parent.myData.timesUpdated ...