角浮动输入标签预读取

我已经使用了风格的一个从这里：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

角浮动输入标签预读取

回答

相关问题