For the sake of learning, I am attempting to develop a bootstrap-style navbar using angularJS 1.3.14. My approach involves creating directives for the navbar, navmenu, navMenuToggle, and navDropDown, with the navMenu serving as a container for toggle and dropdown menu elements.
<navbar>
<div class="navbar-brand">Brand</div>
<collapse-icon></collapse-icon>
<nav-menu>
<div class="nav-button" ng-click="toggle()">Toggle Button</div>
<nav-dropdown>
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
</ul>
</nav-dropdown>
</nav-menu>
</navbar>
The issue arises when expanding the navbar and double-clicking the toggle button, as the navbar's height fails to adjust back upon closing the menu.
You can see the behavior in action in this JS Fiddle (resize window to less than 798px): http://jsfiddle.net/5st3h30j/3/
In the navMenu directive, the toggle() function controls the opening and closing of the dropdown by manipulating the CSS display property and then notifying the parent navbar scope via
$scope.$parent.$parent.$broadcast('dropdownClosed')navDropdown Controller:
$scope.toggle = function () {
if ($scope.open) {
console.log('closing dropdown');
$scope.contract();
$scope.open = false;
$scope.$parent.$parent.$broadcast('dropdownClosed');
} else {
$scope.$parent.$parent.$broadcast('dropdownOpening');
$scope.expand();
$scope.open = true;
$scope.$parent.$parent.$broadcast('dropdownOpened');
}
Navbar:
Controller:
$scope.$on('dropdownClosed', function () {
$scope.adjustHeight();
});
Link Function:
scope.adjustHeight = function () {
console.log('adjusting height');
var height = element.prop('scrollHeight');
element.css('-webkit-transition', 'height 0s');
element.css('height', height + "px");
navbarCtrl.expanded = true;
}
Upon debugging, it appears that the height adjustment functions correctly during expansion but not during contraction. Any insights or alternative approaches would be greatly appreciated.