diff --git a/README.md b/README.md index 80937f8..c1aa0ee 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,37 @@ You can specify a function to call upon dropdown value change by specifying the ``` +## 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', [ + '
', + '{{dropdownModel[labelField]}}', + '', + '
' + ].join('')); +}); + +``` + ## Developing Pull requests are welcome! diff --git a/angular-dropdowns.js b/angular-dropdowns.js index c3a1dae..bc89224 100644 --- 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', [ + '
', + '{{dropdownModel[labelField]}}', + '', + '
' + ].join('')); + + $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [ + '
  • ', + '', + '{{dropdownSelectItem[dropdownItemLabel]}}', + '', + '
    • ' + ].join('')); + + $templateCache.put('ngDropdowns/templates/dropdownMenu.html', [ + '' + ].join('')); + + $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [ + '
  • ', + '', + '{{dropdownMenuItem[dropdownItemLabel]}}', + '', + '
    • ' + ].join('')); + +}]); + dd.directive('dropdownSelect', ['DropdownService', '$window', function (DropdownService, $window) { return { @@ -40,19 +90,7 @@ dd.directive('dropdownSelect', ['DropdownService', '$window', DropdownService.unregister($element); }); }], - - template: [ - '
    ', - '{{dropdownModel[labelField]}}', - '', - '
    ' - ].join('') + templateUrl: 'ngDropdowns/templates/dropdownSelect.html' }; } ]); @@ -76,22 +114,13 @@ dd.directive('dropdownSelectItem', [ }; }, - template: [ - '
  • ', - '', - '{{dropdownSelectItem[dropdownItemLabel]}}', - '', - '
    • ' - ].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([ - '' - ].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: [ - '
  • ', - '', - '{{dropdownMenuItem[dropdownItemLabel]}}', - '', - '
    • ' - ].join('') + templateUrl: 'ngDropdowns/templates/dropdownMenuItem.html' }; } ]); @@ -219,3 +231,4 @@ dd.factory('DropdownService', ['$document', return service; } ]); +})(window, window.angular); \ No newline at end of file diff --git a/dist/angular-dropdowns.js b/dist/angular-dropdowns.js index c3a1dae..bc89224 100644 --- 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', [ + '
    ', + '{{dropdownModel[labelField]}}', + '', + '
    ' + ].join('')); + + $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [ + '
  • ', + '', + '{{dropdownSelectItem[dropdownItemLabel]}}', + '', + '
    • ' + ].join('')); + + $templateCache.put('ngDropdowns/templates/dropdownMenu.html', [ + '' + ].join('')); + + $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [ + '
  • ', + '', + '{{dropdownMenuItem[dropdownItemLabel]}}', + '', + '
    • ' + ].join('')); + +}]); + dd.directive('dropdownSelect', ['DropdownService', '$window', function (DropdownService, $window) { return { @@ -40,19 +90,7 @@ dd.directive('dropdownSelect', ['DropdownService', '$window', DropdownService.unregister($element); }); }], - - template: [ - '
    ', - '{{dropdownModel[labelField]}}', - '', - '
    ' - ].join('') + templateUrl: 'ngDropdowns/templates/dropdownSelect.html' }; } ]); @@ -76,22 +114,13 @@ dd.directive('dropdownSelectItem', [ }; }, - template: [ - '
  • ', - '', - '{{dropdownSelectItem[dropdownItemLabel]}}', - '', - '
    • ' - ].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([ - '' - ].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: [ - '
  • ', - '', - '{{dropdownMenuItem[dropdownItemLabel]}}', - '', - '
    • ' - ].join('') + templateUrl: 'ngDropdowns/templates/dropdownMenuItem.html' }; } ]); @@ -219,3 +231,4 @@ dd.factory('DropdownService', ['$document', return service; } ]); +})(window, window.angular); \ No newline at end of file diff --git a/dist/angular-dropdowns.min.js b/dist/angular-dropdowns.min.js index 5a6e53c..2bdc149 100644 --- a/dist/angular-dropdowns.min.js +++ b/dist/angular-dropdowns.min.js @@ -1,4 +1,4 @@ /** * @license MIT http://jseppi.mit-license.org/license.html */ -"use strict";var dd=angular.module("ngDropdowns",[]);dd.directive("dropdownSelect",["DropdownService","$window",function(e,o){return{restrict:"A",replace:!0,scope:{dropdownSelect:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(o,n,d){o.labelField=d.dropdownItemLabel||"text",e.register(n),this.select=function(e){e!==o.dropdownModel&&angular.copy(e,o.dropdownModel),o.dropdownOnchange({selected:e})};var t="click";n.bind(t,function(o){o.stopPropagation(),e.toggleActive(n)}),o.$on("$destroy",function(){e.unregister(n)})}],template:['
    ','{{dropdownModel[labelField]}}','","
    "].join("")}}]),dd.directive("dropdownSelectItem",[function(){return{require:"^dropdownSelect",replace:!0,scope:{dropdownItemLabel:"=",dropdownSelectItem:"="},link:function(e,o,n,d){e.selectItem=function(){e.dropdownSelectItem.href||d.select(e.dropdownSelectItem)}},template:['
  • ','',"{{dropdownSelectItem[dropdownItemLabel]}}","","
    • "].join("")}}]),dd.directive("dropdownMenu",["$parse","$compile","DropdownService","$window",function(e,o,n,d){return{restrict:"A",replace:!1,scope:{dropdownMenu:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(e,d,t){e.labelField=t.dropdownItemLabel||"text";var r="click",i=angular.element(['"].join(""));i.data("$dropdownMenuController",this);var l=o(i)(e),c=angular.element('
    ');d.replaceWith(c),c.append(d),c.append(l),n.register(l),this.select=function(o){o!==e.dropdownModel&&angular.copy(o,e.dropdownModel),e.dropdownOnchange({selected:o})},d.bind(r,function(e){e.stopPropagation(),n.toggleActive(l)}),e.$on("$destroy",function(){n.unregister(l)})}]}}]),dd.directive("dropdownMenuItem",[function(){return{require:"^dropdownMenu",replace:!0,scope:{dropdownMenuItem:"=",dropdownItemLabel:"="},link:function(e,o,n,d){e.selectItem=function(){e.dropdownMenuItem.href||d.select(e.dropdownMenuItem)}},template:['
  • ','',"{{dropdownMenuItem[dropdownItemLabel]}}","","
    • "].join("")}}]),dd.factory("DropdownService",["$document",function(e){var o=e.find("body"),n={},d=[];return o.bind("click",function(){angular.forEach(d,function(e){e.removeClass("active")})}),n.register=function(e){d.push(e)},n.unregister=function(e){var o;o=d.indexOf(e),o>-1&&d.splice(o,1)},n.toggleActive=function(e){angular.forEach(d,function(o){o!==e&&o.removeClass("active")}),e.toggleClass("active")},n}]); \ No newline at end of file +!function(e,o){"use strict";var n=o.module("ngDropdowns",[]);n.run(["$templateCache",function(e){e.put("ngDropdowns/templates/dropdownSelect.html",['
    ','{{dropdownModel[labelField]}}','","
    "].join("")),e.put("ngDropdowns/templates/dropdownSelectItem.html",['
  • ','',"{{dropdownSelectItem[dropdownItemLabel]}}","","
    • "].join("")),e.put("ngDropdowns/templates/dropdownMenu.html",['"].join("")),e.put("ngDropdowns/templates/dropdownMenuItem.html",['
  • ','',"{{dropdownMenuItem[dropdownItemLabel]}}","","
    • "].join(""))}]),n.directive("dropdownSelect",["DropdownService","$window",function(e,n){return{restrict:"A",replace:!0,scope:{dropdownSelect:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(n,t,d){n.labelField=d.dropdownItemLabel||"text",e.register(t),this.select=function(e){e!==n.dropdownModel&&o.copy(e,n.dropdownModel),n.dropdownOnchange({selected:e})};var r="click";t.bind(r,function(o){o.stopPropagation(),e.toggleActive(t)}),n.$on("$destroy",function(){e.unregister(t)})}],templateUrl:"ngDropdowns/templates/dropdownSelect.html"}}]),n.directive("dropdownSelectItem",[function(){return{require:"^dropdownSelect",replace:!0,scope:{dropdownItemLabel:"=",dropdownSelectItem:"="},link:function(e,o,n,t){e.selectItem=function(){e.dropdownSelectItem.href||t.select(e.dropdownSelectItem)}},templateUrl:"ngDropdowns/templates/dropdownSelectItem.html"}}]),n.directive("dropdownMenu",["$parse","$compile","DropdownService","$window","$templateCache",function(e,n,t,d,r){return{restrict:"A",replace:!1,scope:{dropdownMenu:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(e,d,l){e.labelField=l.dropdownItemLabel||"text";var i="click",p=o.element(r.get("ngDropdowns/templates/dropdownMenu.html"));p.data("$dropdownMenuController",this);var c=n(p)(e),s=o.element('
    ');d.replaceWith(s),s.append(d),s.append(c),t.register(c),this.select=function(n){n!==e.dropdownModel&&o.copy(n,e.dropdownModel),e.dropdownOnchange({selected:n})},d.bind(i,function(e){e.stopPropagation(),t.toggleActive(c)}),e.$on("$destroy",function(){t.unregister(c)})}]}}]),n.directive("dropdownMenuItem",[function(){return{require:"^dropdownMenu",replace:!0,scope:{dropdownMenuItem:"=",dropdownItemLabel:"="},link:function(e,o,n,t){e.selectItem=function(){e.dropdownMenuItem.href||t.select(e.dropdownMenuItem)}},templateUrl:"ngDropdowns/templates/dropdownMenuItem.html"}}]),n.factory("DropdownService",["$document",function(e){var n=e.find("body"),t={},d=[];return n.bind("click",function(){o.forEach(d,function(e){e.removeClass("active")})}),t.register=function(e){d.push(e)},t.unregister=function(e){var o;o=d.indexOf(e),o>-1&&d.splice(o,1)},t.toggleActive=function(e){o.forEach(d,function(o){o!==e&&o.removeClass("active")}),e.toggleClass("active")},t}])}(window,window.angular); \ No newline at end of file diff --git a/example/index.html b/example/index.html index 967ae7a..c13e14a 100644 --- a/example/index.html +++ b/example/index.html @@ -8,7 +8,7 @@ - +