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+'" placeholder="'+attrs.placeholder+'"'
  46                         ;
  47                         if ( attrs.ngRequired ) html += ' ng-required="' + attrs.ngRequired + '"';
  48                         html += '>'+
  49 '    </div>'+
  50 '  </div>';
  51
  52                         element.replaceWith(html);
  53                 }
  54     };
  55   })
  56 .directive('bsTypeahead', ['$parse', function($parse) {
  57         'use strict';
  58
  59         return {
  60                 restrict: 'A',
  61                 require: '?ngModel',
  62                 link: function postLink(scope, element, attr, controller) {
  63
  64                         var getter = $parse(attr.bsTypeahead),
  65                                         setter = getter.assign,
  66                                         value = getter(scope);
  67
  68                         // Watch bsTypeahead for changes
  69                         scope.$watch(attr.bsTypeahead, function(newValue, oldValue) {
  70                                 if(newValue !== oldValue) {
  71                                         value = newValue;
  72                                 }
  73                         });
  74
  75                         element.attr('data-provide', 'typeahead');
  76                         element.typeahead({
  77                                 source: function(query) { return value; },
  78                                 items: attr.items,
  79                                 updater: function(value) {
  80                                         // If we have a controller (i.e. ngModelController) then wire it up
  81                                         if(controller) {
  82                                                 scope.$apply(function () {
  83                                                         controller.$setViewValue(value);
  84                                                 });
  85                                         }
  86                                         return value;
  87                                 }
  88                         });
  89
  90                         // add entered element into typeahead array for other fields
  91                         element.bind('blur', function() {
  92                                 var new_value = element.val();
  93                                 if ( new_value.length > 1 && $.inArray( new_value, value ) === -1 ) { // IE doesn't have .indexOf
  94                                         scope.$apply( function() {
  95                                                 value.unshift( element.val() );
  96                                         });
  97                                 }
  98                         });
  99
 100                 }
 101         };
 102 }])
 103 ;