Question

我按照本教程构建了一个多步骤表单：http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router一切运行良好。

我现在想在这些表单上使用Twitter的typeahead.js。所以我需要在输入上使用angular-ui-router进行预先调用。

我注意到angular-ui-router提供了一个onEnter回调函数，当状态变为活动状态时会调用它。从那里调用typeahead函数似乎不起作用，似乎在加载视图之前调用（不是100％确定）。

如何在我使用angular-ui-router加载的输入字段上初始化typeahead？

我尝试了什么：

.state('questionnaire.relationship', {
  url: '/relationship',
  templateUrl: 'questionnaire/relationship.html',
  onEnter: function(){
    var relationshipList = ['brother', 'sister', 'father', 'mother'];
    var relationships = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: $.map(relationshipList, function(relationship) { return { name: relationship }; })
    });
    relationships.initialize();
    $('#bloodhound .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'relationships',
      displayKey: 'name',## Heading ##
      source: relationships.ttAdapter()
    });
    alert('finished');
  }
})

进入questionnaire.relationship状态时，我会在视图前看到警告弹出窗口。然后我输入的视图正确加载，但是typeahead不起作用。控制台中没有js错误。

我还确保在angular-ui-router之外使用时，预先调用是有效的。

Answer 1

您是否尝试使用角度ui bootstrap typeahead？它是为角度而构建的，不依赖于JQuery

http://angular-ui.github.io/bootstrap/

Typeahead.js与角度ui路由器

1 个答案: