feat(dropdown): support optional templates for dropdown menus

Optionally support specifying a custom template for a dropdown menu.

Allows generating multiple dropdown menus with custom templates.

Author: andreialecu

src/dropdown/docs/demo.html

@@ -55,11 +55,29 @@
         <li><a href="#">Separated link</a></li>
       </ul>
     </div>
+    
+    <!-- Single button using template-url -->
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
+        Dropdown using template <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" template-url="dropdown.html">
+      </ul>
+    </div>
 
     <hr />
     <p>
         <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
         <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
     </p>
-
+    
+    <script type="text/ng-template" id="dropdown.html">
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="#">Action in Template</a></li>
+          <li><a href="#">Another action in Template</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link in Template</a></li>
+        </ul>
+    </script>
 </div>

src/dropdown/docs/readme.md

@@ -11,3 +11,7 @@ By default the dropdown will automatically close if any of its elements is click
   * `always` - (Default) automatically closes the dropdown when any of its elements is clicked.
   * `outsideClick` - closes the dropdown automatically only when the user clicks any element outside the dropdown.
   * `disabled` - disables the auto close. You can then control the open/close status of the dropdown manually, by using `is-open`. Please notice that the dropdown will still close if the toggle is clicked, the `esc` key is pressed or another dropdown is open. The dropdown will no longer close on `$locationChangeSuccess` events.
+
+Optionally, you may specify a template for the dropdown menu using the `template-url` attribute. This is especially useful when you have multiple similar dropdowns in a repeater and you want to keep your HTML output lean and your number of scopes to a minimum. The template has full access to the scope in which the dropdown lies.
+
+Example: `<ul class="dropdown-menu" template-url="custom-dropdown.html"></ul>`.

src/dropdown/dropdown.js

@@ -60,9 +60,10 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 }])
 
-.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document) {
+.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document, $compile, $templateRequest) {
   var self = this,
       scope = $scope.$new(), // create a child scope so we are not polluting original one
+      templateScope,
       openClass = dropdownConfig.openClass,
       getIsOpen,
       setIsOpen = angular.noop,
@@ -131,9 +132,29 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass);
 
     if ( isOpen ) {
+      if (self.dropdownMenuTemplateUrl) {
+        $templateRequest(self.dropdownMenuTemplateUrl).then(function(tplContent) {
+          templateScope = scope.$new();
+          $compile(tplContent.trim())(templateScope, function(dropdownElement) {
+            var newEl = dropdownElement;
+            self.dropdownMenu.replaceWith(newEl);
+            self.dropdownMenu = newEl;
+          });
+        });
+      }
+
       scope.focusToggleElement();
       dropdownService.open( scope );
     } else {
+      if (self.dropdownMenuTemplateUrl) {
+        if (templateScope) {
+          templateScope.$destroy();
+        }
+        var newEl = angular.element('<ul class="dropdown-menu"></ul>');
+        self.dropdownMenu.replaceWith(newEl);
+        self.dropdownMenu = newEl;
+      }
+
       dropdownService.close( scope );
     }
 
@@ -168,10 +189,16 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     restrict: 'AC',
     require: '?^dropdown',
     link: function(scope, element, attrs, dropdownCtrl) {
-      if ( !dropdownCtrl ) {
+      if (!dropdownCtrl) {
         return;
       }
-      dropdownCtrl.dropdownMenu = element;
+      var tplUrl = attrs.templateUrl;
+      if (tplUrl) {
+        dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
+      }
+      if (!dropdownCtrl.dropdownMenu) {
+        dropdownCtrl.dropdownMenu = element;
+      }
     }
   };
 })

src/dropdown/test/dropdown.spec.js

@@ -1,12 +1,13 @@
 describe('dropdownToggle', function() {
-  var $compile, $rootScope, $document, dropdownConfig, element;
+  var $compile, $rootScope, $document, $templateCache, dropdownConfig, element;
 
   beforeEach(module('ui.bootstrap.dropdown'));
 
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _dropdownConfig_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$templateCache_, _dropdownConfig_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $document = _$document_;
+    $templateCache = _$templateCache_;
     dropdownConfig = _dropdownConfig_;
   }));
 
@@ -182,6 +183,30 @@ describe('dropdownToggle', function() {
       expect(element.hasClass(dropdownConfig.openClass)).toBe(false);
     });
   });
+  
+  describe('using dropdownMenuTemplate', function() {
+    function dropdown() {
+      $templateCache.put('custom.html', '<ul class="dropdown-menu"><li>Item 1</li></ul>');
+
+      return $compile('<li dropdown><a href dropdown-toggle></a><ul class="dropdown-menu" template-url="custom.html"></ul></li>')($rootScope);
+    }
+
+    beforeEach(function() {
+      element = dropdown();
+    });
+    
+    it('should apply custom template for dropdown menu', function() {
+      element.find('a').click();
+      expect(element.find('ul.dropdown-menu').eq(0).find('li').eq(0).text()).toEqual('Item 1');
+    });
+
+    it('should clear ul when dropdown menu is closed', function() {
+      element.find('a').click();
+      expect(element.find('ul.dropdown-menu').eq(0).find('li').eq(0).text()).toEqual('Item 1');
+      element.find('a').click();
+      expect(element.find('ul.dropdown-menu').eq(0).find('li').length).toEqual(0);
+    });
+  });
 
   describe('using dropdown-append-to-body', function() {
     function dropdown() {