git.rot13.org Git - angular-drzb/blob - 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                         if ( attrs.ngChange )    html += ' ng-change="' + attrs.ngChange + '"';
  50                         html += '>'+
  51 '    </div>'+
  52 '  </div>';
  53
  54                         element.replaceWith(html);
  55                 }
  56     };
  57 })
  58
  59 .directive('myLabelSelect', function() {
  60     return {
  61                 restrict: 'C',
  62                 compile: function(element, attrs) {
  63                         var my_class = attrs['class'] || '';
  64                         my_class = my_class.replace(/ *my-input */,'');
  65                         var m = attrs.ngModel;
  66                         var html =
  67 '  <div class="control-group">'+
  68 '    <label class="control-label" for="'+m+'">'+attrs.label+'</label>'+
  69 '    <div class="controls">'+
  70 '      <select id="'+m+'" ng-model="'+m+'"';
  71                         ;
  72                         if ( attrs.ngOptions  ) html += ' ng-options="' + attrs.ngOptions + '"';
  73                         if ( attrs.ngChange )    html += ' ng-change="' + attrs.ngChange + '"';
  74                         html += '></select>'+
  75 '    </div>'+
  76 '  </div>';
  77
  78                         element.replaceWith(html);
  79                 }
  80     };
  81 })
  82
  83 .directive('bsTypeahead', ['$parse', function($parse) {
  84         'use strict';
  85
  86         return {
  87                 restrict: 'A',
  88                 require: '?ngModel',
  89                 link: function postLink(scope, element, attr, controller) {
  90
  91                         var getter = $parse(attr.bsTypeahead),
  92                                         setter = getter.assign,
  93                                         value = getter(scope);
  94
  95                         // Watch bsTypeahead for changes
  96                         scope.$watch(attr.bsTypeahead, function(newValue, oldValue) {
  97                                 if(newValue !== oldValue) {
  98                                         value = newValue;
  99                                 }
 100                         });
 101
 102                         element.attr('data-provide', 'typeahead');
 103                         element.typeahead({
 104                                 source: function(query) { return value; },
 105                                 items: attr.items,
 106                                 updater: function(value) {
 107                                         // If we have a controller (i.e. ngModelController) then wire it up
 108                                         if(controller) {
 109                                                 scope.$apply(function () {
 110                                                         controller.$setViewValue(value);
 111                                                 });
 112                                         }
 113                                         return value;
 114                                 }
 115                         });
 116
 117                         // add entered element into typeahead array for other fields
 118                         element.bind('blur', function() {
 119                                 var new_value = element.val();
 120                                 if ( new_value.length > 1 && $.inArray( new_value, value ) === -1 ) { // IE doesn't have .indexOf
 121                                         scope.$apply( function() {
 122                                                 value.unshift( element.val() );
 123                                         });
 124                                 }
 125                         });
 126
 127                 }
 128         };
 129 }])
 130 ;