kątowa etykieta pływający wejście do korzystania wpisywanie znaków z wyprzedzeniem

Question

Użyłem jednego stylu stąd: http://tympanus.net/Development/TextInputEffects/index.html

Aby utworzyć dyrektywę wejściowe, proszę zobaczyć plunker: https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

To działa doskonale na standardowych pól wejściowych, jednak staram się pracować w trybie Twittera: https://github.com/twitter/typeahead.js/

Pytanie - W jaki sposób mogę użyć mojej pływającej etykiety wejściowej z grotem?

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

Najłatwiej wiem do osiągnięcia tego celu jest zainicjować wejście wpisywanie znaków z wyprzedzeniem w funkcji link dyrektywy. Aby zainicjować nagłówek z dostępnymi opcjami, utworzyłbym opcjonalny parametr dyrektywy i wybiórczo zainicjowałby wejście jako wejście typu "dopalacz", jeśli lista zostanie dostarczona.

Oto przykład, jak może wyglądać dyrektywa zamiast:

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); 
    }; 
}; 

mam zaktualizowane plunker do osiągnięcia pożądanego rezultatu: Plunker