Angular floating label for using typeahead

Question

I used one of the styles from here: http://tympanus.net/Development/TextInputEffects/index.html

To create an input directive, see the plunker: https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

This works fine for standard input fields, however I try my best to work with wirth Twitter typeahead: https://github.com/twitter/typeahead.js/

Question. How can I use my floating input label with type name?

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

The easiest way I know for this is to initialize an input of type type in the link function of the directive. To initialize typeahead with available parameters, I would create an optional parameter in the directive and selectively initialize the input as an input type file, if a list is provided.

Here is an example of what the directive might look like:

 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.imtqy.com/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); }; }; 

I updated your plunker to achieve the desired result: Plunker