尝试在 Plunker 中重新创建 Bootstrap 3、Angular JS 和 Typeahead 演示示例

Question

我正在尝试使用 Bootstrap 3、Angular 和 Typeahead 获得一个正常工作的 Plunker，但我发现缺少一些样式，而且我的模型似乎没有正确绑定。我直接从演示页面复制了代码：

http://plnkr.co/edit/8BWdTjV3xllp6OWaMRFq

我在这里使用了所有正确的 JS 和 CSS 库吗？

Answer 1

通过访问您发布的Github repo，我设法找出您的代码有什么问题，使用example page 的源代码创建了AngularJS 示例的功能齐全的Plunker，并将其剥离直到我遇到与您所拥有的不匹配的代码。以下 Plunker 应该是您正在寻找的：

Plunker

我对您的 Plunker 进行了以下更改以使其正常工作：

1. 您的bootstrap-tagsinput-angular-bs3.js 文件与我在上述存储库中找到的文件不匹配，因此我将其替换为存储库的代码。您似乎正在尝试使用导致问题的称为“Hogan”的东西。如果这很重要，请留言说明它是什么以及您需要它的原因，我会调查它。

2. 我删除了 typeahead.js 和 hogan.js 依赖项。第一个是不需要的，因为bootstrap-tagsinput.js 已经使用了它，第二个是因为我不确定它的作用。

3. 由于某种原因，$scope.getTagClass 函数中的 switch 语句返回无效的 CSS 类。我将它们更改为以下内容：

   case 'Europe'   : return 'label label-info';
   case 'America'  : return 'label label-danger label-important';
   case 'Australia': return 'label label-success';
   case 'Africa'   : return 'label label-success'; // Note that 'label-inverse' made the object invisible
   case 'Asia'     : return 'label label-warning';
   

4. 您尝试使用的 BootstrapJS 版本似乎不支持此 Typeahead 组件。我将 bootstrap.min.js 依赖项从 v3.1.1 更改为 v2.3.2。也许这是一个您应该调查的未报告的错误。

5. 您删除了 $http 服务和 $scope.queryCities 功能，但这些对于使组件正常工作是必要的。您试图通过直接加载 cities.json 来跳过此操作，但这仅适用于 Typeahead 的初始填充，并且会导致 Typeahead 预测文本功能不起作用。我将$http 服务添加回您的CityTagsInputController 函数，并将以下函数添加到控制器中：

   $scope.queryCities = function(query) {
       return $http.get('cities.json');
   };
   

6. 最后，您传递给bootstrap-tagsinput 指令的属性有两个问题。如上所述，您不能直接将cities.json 传入typeahead-source 属性。我将其更改为quertyCities。我还将tagClass 属性更改为getTagClass 而不是getTagClass(city)——这个属性只需要函数的名称，而不需要任何参数（即使是这样，你也从来没有定义过city）。

我确保上述每一项更改都是必要的，每次将它们添加回功能齐全的 Plunker（上图），并发现每一项都破坏了代码。因此，您需要进行所有这些更改才能使您的代码正常工作。希望这会有所帮助。