Угловая плавающая метка ввода для использования опережающего ввода

Я использовал один из стилей отсюда: http://tympanus.net/Development/TextInputEffects/index.html

Чтобы создать директиву ввода, см. plunker: https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

Это отлично работает для стандартных полей ввода, однако я изо всех сил пытаюсь работать с Twitter typeahead: https://github.com/twitter/typeahead.js/

Вопрос. Как я могу использовать плавающую метку ввода с вводным текстом?

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>

javascript html angularjs typeahead.js angular-directive
person Oam Psy    schedule 02.07.2016    source источник
comment
где вы упомянули typeahead в своем коде?   -  person Jossef Harush    schedule 02.07.2016
comment
@JossefHarush - я не знаю, я понятия не имею, с чего начать.   -  person Oam Psy    schedule 02.07.2016
comment
Пожалуйста, уточните, какой у вас вопрос. Что вы пробовали? Вы видите ошибку?   -  person Vadiem Janssens    schedule 05.07.2016
comment
@VadiemJanssens — обновил пост с вопросом.   -  person Oam Psy    schedule 05.07.2016

Ответы (1)


arrow_upward
4
arrow_downward

Самый простой известный мне способ добиться этого — инициализировать ввод с опережением ввода в функции link директивы. Для инициализации ввода с доступными параметрами я бы создал необязательный параметр для директивы и выборочно инициализировал бы ввод как ввод ввода, если список предоставлен.

Вот пример того, как могла бы выглядеть директива:

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

Я обновил ваш плункер для достижения желаемого результата: плункер

person Teddy Sterne    schedule 06.07.2016