角浮動輸入標籤預讀取

我已經使用了風格的一個從這裏：http://tympanus.net/Development/TextInputEffects/index.html 角浮動輸入標籤預讀取

創建一個輸入指令，請參閱plunker：https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

這偉大的工作標準輸入字段，但是，我正在努力工作Wirth Twitter typeahead：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>

來源

2016-07-02 Oam Psy

你去哪裏引用代碼中的'typeahead'？ –

@JossefHarush - 我還沒有，我不知道從哪裏開始。 –

請更清楚您的問題。你有什麼嘗試？你看到一個錯誤？ –

我知道實現這一目標最簡單的方法是初始化預輸入輸入指令的link功能。對於使用可用選項初始化typeahead，我會爲該指令創建一個可選參數，並在提供列表時選擇性地將輸入初始化爲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

來源

2016-07-06 13:49:17

角浮動輸入標籤預讀取

回答

相關問題