Opening / closing Twitter-Bootstrap event in angularjs

Question

I am trying to create a drop down list directive that appears when the mouse hovers over the drop-down header or when the drop-down list is omitted and disappears otherwise.

I succeeded, but if the drop-down list is not closed by selecting an item or clicking on the title again, than the arrow does not disappear.

(I.E. If I open one list and open another without closing the first, than the arrow of the first list does not disappear)

---

JsFiddle - http://jsfiddle.net/rpg2kill/uS4Bs/

the code:

var myApp = angular.module('myApp', ['ui.bootstrap']); function MyCtrl($scope) { $scope.supportedList= ['Option1', 'Option2', 'Option3', 'Option4']; $scope.selectedItem = 'Option1'; } myApp.directive('dropDown', function () { return { restrict: 'E', replace: false, scope: { supportedList:'=', selectedItem:'=' }, template: '<div ng-mouseenter="onMouseEntered()" ng-mouseleave="onMouseLeft()">' + '<a class="dropdown-toggle" data-toggle="dropdown" href="" ng-click="onMouseClicked()" >' + '<img ng-style="{\'visibility\': dropDownIconVisibility}" src="http://png.findicons.com/files/icons/2222/gloss_basic/16/arrow_down.png"> </img>' + //Arrow down Icon '<span>{{selectedItem}}</span>' + '</a>' + '<ul class="dropdown-menu">' + '<li ng-repeat="item in supportedList" ng-click="onSelectedItem(item)">' + '{{item}}' + '</li>' + '</ul>' + '</div>' , link: function(scope, element, attrs) { scope.dropDownIconVisibility = "hidden"; scope.dropDownIconVisibilityLocked = false; scope.onSelectedItem = function(item) { scope.dropDownIconVisibilityLocked = false; scope.selectedItem = item ; }; scope.onMouseEntered = function() { scope.dropDownIconVisibility = "visible"; }; scope.onMouseLeft = function() { if (scope.dropDownIconVisibilityLocked) return; scope.dropDownIconVisibility = "hidden"; }; scope.onMouseClicked = function() { scope.dropDownIconVisibility = "visible"; scope.dropDownIconVisibilityLocked = !scope.dropDownIconVisibilityLocked; }; } }; }) 

The code is a little ugly. The best solution is to show the arrow if the mouse hangs OR , the list opens, but I do not know how to associate angular with the state of the drop-down list.

Is there a way to attach angular to twitter bootstrap popup event? Or is there a better way to solve this problem?

Answer 1

The CSS solution found for this problem. css is so simple, not all js events ..

CSS:

 a.dropdown-toggle img { visibility: hidden; } li.ng-scope:hover img,li.ng-scope:active img,.open a img{ visibility: visible; } 

You can check this: http://jsfiddle.net/rpg2kill/HVftB/1/

Answer 2

I suggest you use the full CSS approach - it requires less code, it does not call JS evaluation, so it works better (Angular is a bit slow with all its cool features). After you switch to mobile, CSS will be preferable, as it supports lowering media queries, etc. .... There are too many pros!

Remove all the mouse tracking code and add only two CSS rules and here you go :

 a.dropdown-toggle img { visibility: hidden; } a.dropdown-toggle:hover img { visibility: visible; } 

Answer 3

I managed to solve the problem, unfortunately, the solution is not so beautiful, but at least it works. I will try to solve this problem only with CSS, as the madman suggested.

The problem was that I did not know when the user went beyond the drop-down list, which caused a popup to pop up, but the icon was still showing. Therefore, I attached a handler to each directive that listens for the document.click event and hides the icon.

  document.addEventListener('click', function (event) { scope.$apply(function () { scope.hideDropdownIcon(); }); }, false); 

This worked, but if I clicked on another dropdown menu when the current dropdown menu was open, the document.click event was not fired. So I had to create my event and attach it to $ window and call it when the dropdown list opens.

 var event = new Event('hideDropDownIcon'); $window.addEventListener('hideDropDownIcon', function (e) { scope.hideDropdownIcon(); }, false); 

You can see it here: http://jsfiddle.net/rpg2kill/uS4Bs/6/

There must be a better solution. Therefore, if you know how to do this better or using only css, I would like to know. Thanks.