feat(dropdownToggle): Support hover

src/dropdownToggle/docs/demo.html

@@ -2,9 +2,24 @@
   <a class="dropdown-toggle">
     Click me for a dropdown, yo!
   </a>
+
   <ul class="dropdown-menu">
     <li ng-repeat="choice in items">
       <a>{{choice}}</a>
     </li>
   </ul>
 </li>
+
+
+<li class="dropdown" ng-controller="DropdownCtrl">
+  <a class="dropdown-toggle" dropdown-hover="true">
+    Hover over me for a dropdown, yo!
+  </a>
+
+  <ul class="dropdown-menu">
+    <li ng-repeat="choice in items">
+      <a>{{choice}}</a>
+    </li>
+  </ul>
+</li>
+

src/dropdownToggle/docs/readme.md

@@ -1,2 +1,2 @@
 
-DropdownToggle is a simple directive which will toggle a dropdown link on click.  Simply put it on the `<a>` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `<a dropdown-toggle>` is clicked.
+DropdownToggle is a simple directive which will toggle a dropdown link on click.  Simply put it on the `<a>` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `<a dropdown-toggle>` is clicked. Alternately, you can also make a dropdown menu toggle on hover using the attribute `dropdown-hover` i.e. `<a dropdown-toggle dropdown-hover="true">`

src/dropdownToggle/dropdownToggle.js

@@ -20,6 +20,19 @@ angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['
     link: function(scope, element, attrs) {
       scope.$watch('$location.path', function() { closeMenu(); });
       element.parent().bind('click', function() { closeMenu(); });
+
+      if (attrs.dropdownHover) {
+        element.parent().bind('mouseover', function(event) {
+          event.stopPropagation();
+          element.parent().addClass('open');
+        });
+
+        element.parent().bind('mouseout', function(event) {
+          event.stopPropagation();
+          element.parent().removeClass('open');
+        });
+      }
+
       element.bind('click', function (event) {
 
         var elementWasOpen = (element === openElement);

src/dropdownToggle/test/dropdownToggleSpec.js

@@ -14,7 +14,22 @@ describe('dropdownToggle', function() {
   function dropdown() {
     return $compile('<li class="dropdown"><a dropdown-toggle></a><ul dropdown-toggle><li>Hello</li></ul></li>')($rootScope);
   }
-
+
+  function dropdownHover() {
+    return $compile('<li class="dropdown"><a dropdown-toggle dropdown-hover="true"></a><ul dropdown-toggle><li>Hello</li></ul></li>')($rootScope); 
+  }
+
+  it('should toggle if hover is true', function() {
+    var elm = dropdownHover();
+    expect(elm.hasClass('open')).toBe(false);
+    elm.find('a').mouseover();
+    expect(elm.hasClass('open')).toBe(true);
+
+    // only close the dropdown after exiting li tag.
+    elm.find('li').mouseout();
+    expect(elm.hasClass('close')).toBe(false);
+  });
+
   it('should toggle on `a` click', function() {
     var elm = dropdown();
     expect(elm.hasClass('open')).toBe(false);