place templates in so they can be overridden

jseppi · Oct 28, 2014 · 53eb561 · 53eb561
1 parent 6c41c92
commit 53eb561
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -90,6 +90,37 @@ You can specify a function to call upon dropdown value change by specifying the
 </div>
 ```
 
+## Custom Templates
+
+If you'd like to customize the templates more, you can override the values stored in the following `$templateCache` keys:
+
+  * `ngDropdowns/templates/dropdownSelect.html`
+  * `ngDropdowns/templates/dropdownSelectItem.html`
+  * `ngDropdowns/templates/dropdownMenu.html`
+  * `ngDropdowns/templates/dropdownMenuItem.html`
+
+To do this, you can put your custom templates in the cache from your `app.run()` method. For example:
+
+```js
+var app = angular.module('app', ['ngDropdowns']);
+
+app.run(function ($templateCache) {
+  $templateCache.put('ngDropdowns/templates/dropdownSelect.html', [
+    '<div class="wrap-dd-select my-custom-class">',
+      '<span class="selected my-selected-class">{{dropdownModel[labelField]}}</span>',
+      '<ul class="custom-dropdown">',
+        '<li ng-repeat="item in dropdownSelect"',
+        ' class="dropdown-item"',
+        ' dropdown-select-item="item"',
+        ' dropdown-item-label="labelField">',
+        '</li>',
+      '</ul>',
+    '</div>'
+  ].join(''));
+});
+
+```
+
 ## Developing
 
 Pull requests are welcome!

diff --git a/angular-dropdowns.js b/angular-dropdowns.js
@@ -1,9 +1,59 @@
 /**
  * @license MIT http://jseppi.mit-license.org/license.html
 */
+(function(window, angular, undefined) {
 'use strict';
+
 var dd = angular.module('ngDropdowns', []);
 
+dd.run(['$templateCache', function ($templateCache) {
+  $templateCache.put('ngDropdowns/templates/dropdownSelect.html', [
+    '<div class="wrap-dd-select">',
+      '<span class="selected">{{dropdownModel[labelField]}}</span>',
+      '<ul class="dropdown">',
+        '<li ng-repeat="item in dropdownSelect"',
+        ' class="dropdown-item"',
+        ' dropdown-select-item="item"',
+        ' dropdown-item-label="labelField">',
+        '</li>',
+      '</ul>',
+    '</div>'
+  ].join(''));
+
+  $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [
+    '<li ng-class="{divider: dropdownSelectItem.divider}">',
+      '<a href="" class="dropdown-item"',
+      ' ng-if="!dropdownSelectItem.divider"',
+      ' ng-href="{{dropdownSelectItem.href}}"',
+      ' ng-click="selectItem()">',
+        '{{dropdownSelectItem[dropdownItemLabel]}}',
+      '</a>',
+    '</li>'
+  ].join(''));
+
+  $templateCache.put('ngDropdowns/templates/dropdownMenu.html', [
+    '<ul class="dropdown">',
+      '<li ng-repeat="item in dropdownMenu"',
+      ' class="dropdown-item"',
+      ' dropdown-item-label="labelField"',
+      ' dropdown-menu-item="item">',
+      '</li>',
+    '</ul>'
+  ].join(''));
+
+  $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [
+    '<li ng-class="{divider: dropdownMenuItem.divider}">',
+      '<a href="" class="dropdown-item"',
+      ' ng-if="!dropdownMenuItem.divider"',
+      ' ng-href="{{dropdownMenuItem.href}}"',
+      ' ng-click="selectItem()">',
+        '{{dropdownMenuItem[dropdownItemLabel]}}',
+      '</a>',
+    '</li>'
+  ].join(''));
+
+}]);
+
 dd.directive('dropdownSelect', ['DropdownService', '$window',
   function (DropdownService, $window) {
     return {
@@ -40,19 +90,7 @@ dd.directive('dropdownSelect', ['DropdownService', '$window',
           DropdownService.unregister($element);
         });
       }],
-
-      template: [
-        '<div class="wrap-dd-select">',
-          '<span class="selected">{{dropdownModel[labelField]}}</span>',
-          '<ul class="dropdown">',
-            '<li ng-repeat="item in dropdownSelect"',
-            ' class="dropdown-item"',
-            ' dropdown-select-item="item"',
-            ' dropdown-item-label="labelField">',
-            '</li>',
-          '</ul>',
-        '</div>'
-      ].join('')
+      templateUrl: 'ngDropdowns/templates/dropdownSelect.html' 
     };
   }
 ]);
@@ -76,22 +114,13 @@ dd.directive('dropdownSelectItem', [
         };
       },
 
-      template: [
-        '<li ng-class="{divider: dropdownSelectItem.divider}">',
-          '<a href="" class="dropdown-item"',
-          ' ng-if="!dropdownSelectItem.divider"',
-          ' ng-href="{{dropdownSelectItem.href}}"',
-          ' ng-click="selectItem()">',
-            '{{dropdownSelectItem[dropdownItemLabel]}}',
-          '</a>',
-        '</li>'
-      ].join('')
+      templateUrl: 'ngDropdowns/templates/dropdownSelectItem.html' 
     };
   }
 ]);
 
-dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window',
-  function ($parse, $compile, DropdownService, $window) {
+dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window', '$templateCache',
+  function ($parse, $compile, DropdownService, $window, $templateCache) {
     return {
       restrict: 'A',
       replace: false,
@@ -106,15 +135,7 @@ dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window'
 
         // Does not register touchstart events outside of directive scope.
         var $clickEvent = ('click'||'touchstart' in $window);
-        var $template = angular.element([
-          '<ul class="dropdown">',
-            '<li ng-repeat="item in dropdownMenu"',
-            ' class="dropdown-item"',
-            ' dropdown-item-label="labelField"',
-            ' dropdown-menu-item="item">',
-            '</li>',
-          '</ul>'
-        ].join(''));
+        var $template = angular.element($templateCache.get('ngDropdowns/templates/dropdownMenu.html'));
         // Attach this controller to the element's data
         $template.data('$dropdownMenuController', this);
 
@@ -168,16 +189,7 @@ dd.directive('dropdownMenuItem', [
         };
       },
 
-      template: [
-        '<li ng-class="{divider: dropdownMenuItem.divider}">',
-          '<a href="" class="dropdown-item"',
-          ' ng-if="!dropdownMenuItem.divider"',
-          ' ng-href="{{dropdownMenuItem.href}}"',
-          ' ng-click="selectItem()">',
-            '{{dropdownMenuItem[dropdownItemLabel]}}',
-          '</a>',
-        '</li>'
-      ].join('')
+      templateUrl: 'ngDropdowns/templates/dropdownMenuItem.html'
     };
   }
 ]);
@@ -219,3 +231,4 @@ dd.factory('DropdownService', ['$document',
     return service;
   }
 ]);
+})(window, window.angular);
diff --git a/dist/angular-dropdowns.js b/dist/angular-dropdowns.js
@@ -1,9 +1,59 @@
 /**
  * @license MIT http://jseppi.mit-license.org/license.html
 */
+(function(window, angular, undefined) {
 'use strict';
+
 var dd = angular.module('ngDropdowns', []);
 
+dd.run(['$templateCache', function ($templateCache) {
+  $templateCache.put('ngDropdowns/templates/dropdownSelect.html', [
+    '<div class="wrap-dd-select">',
+      '<span class="selected">{{dropdownModel[labelField]}}</span>',
+      '<ul class="dropdown">',
+        '<li ng-repeat="item in dropdownSelect"',
+        ' class="dropdown-item"',
+        ' dropdown-select-item="item"',
+        ' dropdown-item-label="labelField">',
+        '</li>',
+      '</ul>',
+    '</div>'
+  ].join(''));
+
+  $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [
+    '<li ng-class="{divider: dropdownSelectItem.divider}">',
+      '<a href="" class="dropdown-item"',
+      ' ng-if="!dropdownSelectItem.divider"',
+      ' ng-href="{{dropdownSelectItem.href}}"',
+      ' ng-click="selectItem()">',
+        '{{dropdownSelectItem[dropdownItemLabel]}}',
+      '</a>',
+    '</li>'
+  ].join(''));
+
+  $templateCache.put('ngDropdowns/templates/dropdownMenu.html', [
+    '<ul class="dropdown">',
+      '<li ng-repeat="item in dropdownMenu"',
+      ' class="dropdown-item"',
+      ' dropdown-item-label="labelField"',
+      ' dropdown-menu-item="item">',
+      '</li>',
+    '</ul>'
+  ].join(''));
+
+  $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [
+    '<li ng-class="{divider: dropdownMenuItem.divider}">',
+      '<a href="" class="dropdown-item"',
+      ' ng-if="!dropdownMenuItem.divider"',
+      ' ng-href="{{dropdownMenuItem.href}}"',
+      ' ng-click="selectItem()">',
+        '{{dropdownMenuItem[dropdownItemLabel]}}',
+      '</a>',
+    '</li>'
+  ].join(''));
+
+}]);
+
 dd.directive('dropdownSelect', ['DropdownService', '$window',
   function (DropdownService, $window) {
     return {
@@ -40,19 +90,7 @@ dd.directive('dropdownSelect', ['DropdownService', '$window',
           DropdownService.unregister($element);
         });
       }],
-
-      template: [
-        '<div class="wrap-dd-select">',
-          '<span class="selected">{{dropdownModel[labelField]}}</span>',
-          '<ul class="dropdown">',
-            '<li ng-repeat="item in dropdownSelect"',
-            ' class="dropdown-item"',
-            ' dropdown-select-item="item"',
-            ' dropdown-item-label="labelField">',
-            '</li>',
-          '</ul>',
-        '</div>'
-      ].join('')
+      templateUrl: 'ngDropdowns/templates/dropdownSelect.html' 
     };
   }
 ]);
@@ -76,22 +114,13 @@ dd.directive('dropdownSelectItem', [
         };
       },
 
-      template: [
-        '<li ng-class="{divider: dropdownSelectItem.divider}">',
-          '<a href="" class="dropdown-item"',
-          ' ng-if="!dropdownSelectItem.divider"',
-          ' ng-href="{{dropdownSelectItem.href}}"',
-          ' ng-click="selectItem()">',
-            '{{dropdownSelectItem[dropdownItemLabel]}}',
-          '</a>',
-        '</li>'
-      ].join('')
+      templateUrl: 'ngDropdowns/templates/dropdownSelectItem.html' 
     };
   }
 ]);
 
-dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window',
-  function ($parse, $compile, DropdownService, $window) {
+dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window', '$templateCache',
+  function ($parse, $compile, DropdownService, $window, $templateCache) {
     return {
       restrict: 'A',
       replace: false,
@@ -106,15 +135,7 @@ dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window'
 
         // Does not register touchstart events outside of directive scope.
         var $clickEvent = ('click'||'touchstart' in $window);
-        var $template = angular.element([
-          '<ul class="dropdown">',
-            '<li ng-repeat="item in dropdownMenu"',
-            ' class="dropdown-item"',
-            ' dropdown-item-label="labelField"',
-            ' dropdown-menu-item="item">',
-            '</li>',
-          '</ul>'
-        ].join(''));
+        var $template = angular.element($templateCache.get('ngDropdowns/templates/dropdownMenu.html'));
         // Attach this controller to the element's data
         $template.data('$dropdownMenuController', this);
 
@@ -168,16 +189,7 @@ dd.directive('dropdownMenuItem', [
         };
       },
 
-      template: [
-        '<li ng-class="{divider: dropdownMenuItem.divider}">',
-          '<a href="" class="dropdown-item"',
-          ' ng-if="!dropdownMenuItem.divider"',
-          ' ng-href="{{dropdownMenuItem.href}}"',
-          ' ng-click="selectItem()">',
-            '{{dropdownMenuItem[dropdownItemLabel]}}',
-          '</a>',
-        '</li>'
-      ].join('')
+      templateUrl: 'ngDropdowns/templates/dropdownMenuItem.html'
     };
   }
 ]);
@@ -219,3 +231,4 @@ dd.factory('DropdownService', ['$document',
     return service;
   }
 ]);
+})(window, window.angular);
diff --git a/dist/angular-dropdowns.min.js b/dist/angular-dropdowns.min.js
diff --git a/example/index.html b/example/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../dist/angular-dropdowns.css">
     <link rel="stylesheet" href="page.css">
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
-    <script type="text/javascript" src="../dist/angular-dropdowns.js"></script>
+    <script type="text/javascript" src="../dist/angular-dropdowns.min.js"></script>
     <script type="text/javascript" src="app.js"></script>
   </head>
   <body ng-app="app" style="margin-top:50px;">