Пользовательские события Twitter Typeahead не запускаются

Я работаю над пользовательской директивой Angular.js для переноса Twitter Typeahead . Функция typedown, похоже, работает нормально, однако ни одно из пользовательских событий, похоже, вообще не срабатывает. Я использую Angular 1.2.6, Twitter Typeahead 0.10.2 и jQuery 1.10.2. Вот пара фрагментов моего кода:

поиск-doctors.html

<div class="controls">
    <div class="span11 input-append">
        <input type="search" class="span10" name="practiceName" ng-model="message.practiceName" required typedown="contactDoctors" />
        <span class="add-on search-glass"><i class="fa fa-search"></i></span>
    </div>
</div>

typedown.coffee

angular.module('someApp')
  .directive('typedown', ->
    restrict: 'A'
    link: (scope, element, attrs) ->
      element.typeahead({
        name: attrs.typedown
        source: (query, cb) ->
          # Ultimately, this will call to a service that will return the array of
          # search results, but for simplicity's sake, I'm stubbing some dummy data.
          cb ['Neurocare of Scottsdale', 'Neurocare of Tempe']
      })
      # These never seem to get fired, despite following the instructions in
      # typeahead's documentation
      .on 'typeahead:opened', ->
        alert 'opened'
      .on 'typeahead:autocompleted typeahead:selected', (event, query) ->
        alert query
)

Typedown на самом деле, кажется, работает над пользовательским интерфейсом. Когда я ввожу «нейро» в поле поиска, я получаю ожидаемое поведение, но когда я нажимаю вкладку или нажимаю опцию автозаполнения, соответствующие обработчики событий не срабатывают. Кроме того, когда я начинаю печатать и открывается typedown, ожидаемое событие typeahead:opened не срабатывает.

Я пытался привязать события к элементу перед вызовом typeahead для элемента директивы. Я также пробовал использовать bind вместо on (хотя это не должно иметь никакого эффекта). В любом случае, у меня заканчиваются время и идеи, чтобы сделать эту работу. Я хотел бы получить быструю проверку вменяемости и несколько дополнительных глаз, чтобы увидеть, есть ли что-то, что я упускаю.

Заранее спасибо!


person JasonOffutt    schedule 13.06.2014    source источник
comment
Ребята из AngularUI уже отлично поработали над созданием обертки для typeahead для AngularJS , я действительно рекомендую вам проверить его, прежде чем погрузиться в его написание самостоятельно.   -  person GabrielG    schedule 13.06.2014
comment
Спасибо за предложение. Хотя это выглядит великолепно, я решил не использовать проект Angular UI, просто чтобы ограничить количество сторонних зависимостей, которые у меня есть в этом проекте (которые уже довольно значительны). Возможно, стоит вернуться, когда я обновлю Bootstrap до 3.0.   -  person JasonOffutt    schedule 23.06.2014


Ответы (1)


Потратив несколько дней на другие дела, я вернулся к себе. Мне пришло в голову, что, поскольку я уже использовал Bootstrap 2.3.2, включение Twitter Typeahead, скорее всего, вызовет конфликты с тем, какой сценарий будет управлять $.fn.typeahead. Мне удалось заставить его работать, удалив Twitter Typeahead и полагаясь на устаревшую реализацию, встроенную в Bootstrap 2.3.2. В конце концов я перейду на Bootstrap 3, но сейчас это довольно сложная задача, и проект будет использоваться в больницах, которые, как известно, отстают в развитии веб-технологий.

person JasonOffutt    schedule 21.06.2014