added my-label-select
[angular-drzb] / app / js / directives.js
1 'use strict';
2
3 /* Directives */
4
5
6 angular.module('myApp.directives', []).
7   directive('appVersion', ['version', function(version) {
8     return function(scope, elm, attrs) {
9       elm.text(version);
10     };
11   }]).
12   directive('myInput', function() {
13     return {
14                 restrict: 'C',
15                 compile: function(element, attrs) {
16                         var my_class = attrs['class'] || '';
17                         my_class = my_class.replace(/ *my-input */,'');
18                         var my_type  = attrs['type']  || 'text';
19                         var html = '<div class="'+my_class+'">'
20                                 +'<label for="'+attrs.ngModel+'">' + attrs.placeholder + '</label>'
21                                 +'<input type="'+my_type+'" name="'+attrs.ngModel+'" ng-model="' + attrs.ngModel + '"'
22                                 +' placeholder="'+attrs.placeholder+'" class="'+my_class+'"'
23                         ;
24                         if ( attrs.ngRequired ) html += ' ng-required="' + attrs.ngRequired + '"';
25                         if ( attrs.bsTypeahead )  html += ' bs-typeahead="'+attrs.bsTypeahead+'"';
26                         if ( attrs.dataItems )  html += ' data-items="'+attrs.dataItems+'"'; // for typeahead
27                         html += '/></div>';
28                         element.replaceWith(html);
29                 }
30     };
31   }).
32
33 directive('myLabelInput', function() {
34     return {
35                 restrict: 'C',
36                 compile: function(element, attrs) {
37                         var my_class = attrs['class'] || '';
38                         my_class = my_class.replace(/ *my-input */,'');
39                         var my_type  = attrs['type']  || 'text';
40                         var m = attrs.ngModel;
41                         var html =
42 '  <div class="control-group">'+
43 '    <label class="control-label" for="'+m+'">'+attrs.label+'</label>'+
44 '    <div class="controls">'+
45 '      <input type="'+my_type+'" id="'+m+'" ng-model="'+m+'"';
46                         ;
47                         if ( attrs.placeholder ) html += ' placeholder="' + attrs.placeholder + '"';
48                         if ( attrs.ngRequired ) html += ' ng-required="' + attrs.ngRequired + '"';
49                         html += '>'+
50 '    </div>'+
51 '  </div>';
52
53                         element.replaceWith(html);
54                 }
55     };
56 })
57
58 .directive('myLabelSelect', function() {
59     return {
60                 restrict: 'C',
61                 compile: function(element, attrs) {
62                         var my_class = attrs['class'] || '';
63                         my_class = my_class.replace(/ *my-input */,'');
64                         var m = attrs.ngModel;
65                         var html =
66 '  <div class="control-group">'+
67 '    <label class="control-label" for="'+m+'">'+attrs.label+'</label>'+
68 '    <div class="controls">'+
69 '      <select id="'+m+'" ng-model="'+m+'"';
70                         ;
71                         if ( attrs.ngOptions  ) html += ' ng-options="' + attrs.ngOptions + '"';
72                         html += '></select>'+
73 '    </div>'+
74 '  </div>';
75
76                         element.replaceWith(html);
77                 }
78     };
79 })
80
81 .directive('bsTypeahead', ['$parse', function($parse) {
82         'use strict';
83
84         return {
85                 restrict: 'A',
86                 require: '?ngModel',
87                 link: function postLink(scope, element, attr, controller) {
88
89                         var getter = $parse(attr.bsTypeahead),
90                                         setter = getter.assign,
91                                         value = getter(scope);
92
93                         // Watch bsTypeahead for changes
94                         scope.$watch(attr.bsTypeahead, function(newValue, oldValue) {
95                                 if(newValue !== oldValue) {
96                                         value = newValue;
97                                 }
98                         });
99
100                         element.attr('data-provide', 'typeahead');
101                         element.typeahead({
102                                 source: function(query) { return value; },
103                                 items: attr.items,
104                                 updater: function(value) {
105                                         // If we have a controller (i.e. ngModelController) then wire it up
106                                         if(controller) {
107                                                 scope.$apply(function () {
108                                                         controller.$setViewValue(value);
109                                                 });
110                                         }
111                                         return value;
112                                 }
113                         });
114
115                         // add entered element into typeahead array for other fields
116                         element.bind('blur', function() {
117                                 var new_value = element.val();
118                                 if ( new_value.length > 1 && $.inArray( new_value, value ) === -1 ) { // IE doesn't have .indexOf
119                                         scope.$apply( function() {
120                                                 value.unshift( element.val() );
121                                         });
122                                 }
123                         });
124
125                 }
126         };
127 }])
128 ;