将 ng-token-auth 与 typeahead/bloodhound 一起使用

Question

在Angular.js项目中，我使用了ng-token-auth for user authentication, I want to integrate Twitter Typeahead.js。

我构造了一个指令，其中link函数的内容是：

link: (scope, element, attrs) ->
        hs_list = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('hs8'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          remote: 'api/trainings/hs_list?q=%QUERY'
        })
        hs_list.initialize()
        element.typeahead(null, {
          name: 'hs-mapping-id',
          displayKey: 'hs8',
          source: hs_list.ttAdapter(),
          templates: {
            empty: [
              '<div class="empty-message">',
              'We cannot find this training',
              '</div>'
            ].join('\n'),
            suggestion: Handlebars.compile('<p class="clearfix"><strong>{{hs8}}</strong> &mdash; {{hs8_text}}<br /><span style="display:inline-block; height: 22px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; max-width: 400px;">{{hs6_text}}</span></p>')
          }
        })
        .bind( 'typeahead:opened', ->
          $(this).data('ttTypeahead').dropdown.$menu.addClass('overflow-hidden').perfectScrollbar()
        )
        .on 'keyup', ->
          $(this).data('ttTypeahead').dropdown.$menu.perfectScrollbar('update')

当我尝试使用它时，我得到了未经授权的访问重定向，因为 Bloodhound 请求中缺少身份验证 headers。请求中添加authheaders的方法是什么？

Answer 1

好的，我找到答案了！

ng-token-auth 提供了一个助手，returns headers for ajax settings object:

$auth.retrieveData('auth_headers')

因此，为了将它与 Bloodhound 一起使用，我们需要做的是：

angular.module('app').directive 'trainingsList', ($auth) ->
    return {
      restrict: 'A'
      link: (scope, element, attrs) ->
        hs_list = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('hs8'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          remote:
            url: 'api/trainings/hs_list?q=%QUERY'
            ajax:
              headers: $auth.retrieveData('auth_headers')

        })
        hs_list.initialize()
        element.typeahead(null, {
          name: 'hs-mapping-id',
          displayKey: 'hs8',
          source: hs_list.ttAdapter(),
          templates: {
            empty: [
              '<div class="empty-message">',
              'We cannot find this training',
              '</div>'
            ].join('\n'),
            suggestion: Handlebars.compile('<p class="clearfix"><strong>{{hs8}}</strong> &mdash; {{hs8_text}}<br /><span style="display:inline-block; height: 22px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; max-width: 400px;">{{hs6_text}}</span></p>')
          }
        })
        .bind( 'typeahead:opened', ->
          $(this).data('ttTypeahead').dropdown.$menu.addClass('overflow-hidden').perfectScrollbar()
        )
        .on 'keyup', ->
          $(this).data('ttTypeahead').dropdown.$menu.perfectScrollbar('update')
    };

将 ng-token-auth 与 typeahead/bloodhound 一起使用

Use ng-token-auth toghether with typeahead/bloodhound

angularjs

angularjs-directive