feat(dropdown): add alignment option

src/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.dropdown', [])
+angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
 .constant('dropdownConfig', {
   openClass: 'open'
@@ -42,7 +42,7 @@ angular.module('ui.bootstrap.dropdown', [])
   };
 }])
 
-.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate) {
+.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position) {
   var self = this,
       scope = $scope.$new(), // create a child scope so we are not polluting original one
       openClass = dropdownConfig.openClass,
@@ -78,11 +78,21 @@ angular.module('ui.bootstrap.dropdown', [])
     }
   };
 
+  scope.positionMenuElement = function() {
+    if ( self.menuElement && self.menuAlign ) {
+      var pos = $position.alignElements(self.toggleElement, self.menuElement, self.menuAlign);
+      if (angular.isDefined( pos.left )) {
+        self.menuElement.css('left', pos.left + 'px');
+      }
+    }
+  };
+
   scope.$watch('isOpen', function( isOpen ) {
     $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass);
 
     if ( isOpen ) {
       scope.focusToggleElement();
+      scope.positionMenuElement();
       dropdownService.open( scope );
     } else {
       dropdownService.close( scope );
@@ -106,11 +116,27 @@ angular.module('ui.bootstrap.dropdown', [])
     restrict: 'CA',
     controller: 'DropdownController',
     link: function(scope, element, attrs, dropdownCtrl) {
+
       dropdownCtrl.init( element );
     }
   };
 })
 
+.directive('dropdownMenu', function() {
+  return {
+    restrict: 'CA',
+    require: '?^dropdown',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if ( !dropdownCtrl ) {
+        return;
+      }
+
+      dropdownCtrl.menuElement = element;
+      dropdownCtrl.menuAlign = attrs.dropdownAlign;
+    }
+  };
+})
+
 .directive('dropdownToggle', function() {
   return {
     restrict: 'CA',

src/position/position.js

@@ -146,6 +146,54 @@ angular.module('ui.bootstrap.position', [])
             break;
         }
 
+        return targetElPos;
+      },
+
+      /**
+       * Provides coordinates for aligning horizontally the targetEl
+       * to the hostEl. Allowed values for positionStr are "left", "right",
+       * "left-auto", "right-auto" and "center"
+       */
+      alignElements: function (hostEl, targetEl, positionStr, appendToBody) {
+
+        positionStr = positionStr || 'left';
+
+        var hostElPos,
+          hostElOffset,
+          targetElWidth,
+          targetElPos;
+
+        hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        hostElOffset = this.offset(hostEl);
+
+        targetElWidth = targetEl.prop('offsetWidth');
+
+        var shiftHorizontally = {
+          left: function () {
+            return hostElPos.left;
+          },
+          // Like left but prevents target element to overflow on the right
+          'left-auto': function () {
+            var clientWidth = $document[0].documentElement.clientWidth;
+            return Math.min(hostElPos.left, clientWidth - targetElWidth);
+          },
+          right: function () {
+            return hostElPos.left + hostElPos.width - targetElWidth;
+          },
+          // Like left but prevents target element to overflow on the left
+          'right-auto': function () {
+            return Math.max(-hostElOffset.left, hostElPos.left + hostElPos.width - targetElWidth);
+          },
+          center: function () {
+            return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
+          }
+        };
+
+        targetElPos = {
+          top: hostElPos.top + hostElPos.height,
+          left: shiftHorizontally[positionStr]()
+        };
+
         return targetElPos;
       }
     };