góc nhãn đầu vào nổi để sử dụng typeahead

Question

Tôi đã sử dụng một trong những phong cách từ đây: http://tympanus.net/Development/TextInputEffects/index.html

Để tạo ra một chỉ thị đầu vào, vui lòng xem plunker: https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

này làm việc tuyệt vời cho các lĩnh vực đầu vào tiêu chuẩn, tuy nhiên, Tôi đang đấu tranh để làm việc wirth Twitter typeahead: https://github.com/twitter/typeahead.js/

Câu hỏi - Làm thế nào tôi có thể sử dụng nhãn nhập nổi của tôi với một 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

Cách dễ nhất tôi biết để đạt được điều này là để khởi đầu vào typeahead trong link chức năng của chỉ thị. Để khởi tạo các typeahead với các tùy chọn có sẵn, tôi sẽ tạo một tham số tùy chọn cho chỉ thị và chọn lọc khởi tạo đầu vào như một đầu vào typeahead nếu danh sách được cung cấp.

Dưới đây là một ví dụ về cách chỉ thị có thể nhìn thay vì:

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

Tôi đã cập nhật plunker của bạn để đạt được kết quả mong muốn: Plunker