Угловая метка плавающей ввода использовать машинописный

Question

Я использовал один из стиля здесь: http://tympanus.net/Development/TextInputEffects/index.html

Чтобы создать директиву входа, пожалуйста, см plunker: https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

Это работает отлично подходит для стандартных полей ввода, однако, Я изо всех сил стараюсь работать с вихрем. Твиттер: https://github.com/twitter/typeahead.js/

Вопрос: Как я могу использовать свою плавающую метку ввода с помощью typeahead?

app.directive('floatInput', function($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     elemTitle: '=elemTitle', 
     elemtId: '=elemeId' 
    }, 
    templateUrl: 'input-template.html', 
    link: function(scope, elem, attrs) { 
     var ngModelName = elem.attr('input-model'); 
     var inputElem = angular.element(elem[0].querySelector('input')); 
     inputElem.attr('ng-model', ngModelName); 

     $compile(inputElem)(scope); 
     $compile(inputElem)(scope.$parent); 

     var inputLabel = angular.element(elem[0].querySelector('label span')); 
     inputLabel.attr('ng-class', '{\'annimate-input\' : '+ngModelName+'.length > 0}'); 
     $compile(inputLabel)(scope); 
    }, 
    controller: function($scope) { 
     $scope.title = $scope.elemTitle; 
     $scope.inputId = $scope.elemId 
    } 
    } 
}) 

HTML:

<div> 
<span class="input input--juro"> 
    <input class="input__field input__field--juro" type="text" id="{{inputId}}" ng-model="tmp" /> 
    <label class="input__label input__label--juro" for="{{inputId}}"> 
    <span class="input__label-content input__label-content--juro">{{title}}</span> 
    </label> 
    </span> 
</div> 

Answer 1

Самый простой способ я знаю, чтобы добиться этого, чтобы инициализировать вход машинописный в link функции директивы. Для инициализации typeahead с доступными параметрами я бы создал необязательный параметр в директиве и выборочно инициализировал ввод как входной элемент типа, если список предоставлен.

Вот пример того, как директива может выглядеть вместо:

app.directive('floatInput', function($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     elemTitle: '=elemTitle', 
     elemtId: '=elemeId', 
     typeaheadSrc: '=?typeaheadSrc' 
    }, 
    templateUrl: 'input-template.html', 
    link: function(scope, elem, attrs) { 
     var inputElem = angular.element(elem[0].querySelector('input')); 

     if(scope.typeaheadSrc && scope.typeaheadSrc.length > 0){ 
     var typeahead = jQuery(inputElem).typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, { 
      name: 'typeahead', 
      source: substringMatcher(scope.typeaheadSrc) 
     }); 
     } 
    }, 
    controller: function($scope) { 
     $scope.title = $scope.elemTitle; 
     $scope.inputId = $scope.elemId 
    } 
    } 
}); 
// from http://twitter.github.io/typeahead.js/examples/ 
var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
    var matches= [], 
     substrRegex = new RegExp(q, 'i'); 

    $.each(strs, function(i, str) { 
     if (substrRegex.test(str)) { 
     matches.push({value: str}); 
     } 
    }); 

    cb(matches); 
    }; 
}; 

Я обновил свой plunker для достижения желаемого результата: Plunker