0

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

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

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

4

1 回答 1

1

通过访问您发布的Github存储库，我设法找出了您的代码有什么问题，使用示例页面的源代码创建了 AngularJS 示例的全功能Plunker，并将其剥离，直到我遇到代码不符合你所拥有的。以下 Plunker 应该是您正在寻找的：

普朗克

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

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

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

  3. 出于某种原因，函数switch内的语句$scope.getTagClass返回无效的 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. 您正在尝试使用似乎不支持此 Typeahead 组件的 BootstrapJS 版本。我将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（上图）来确保上述每一项更改都是必要的，并发现每一项都破坏了代码。因此，您需要进行所有这些更改才能使您的代码正常工作。希望这可以帮助。

于 2014-07-03T15:05:54.980 回答