angular-bootstrap 中的 Typeahead 插件对我不起作用答案

【问题标题】：Typeahead plugin in angular-bootstrap not working for meangular-bootstrap 中的 Typeahead 插件对我不起作用
【发布时间】：2024-05-19 07:25:02
【问题描述】：

我无法让 angular-bootstrap 中的 typeahead 功能在简单的 yeoman 生成的环境中工作。我期待的是能够开始在输入字段中输入内容，并在下拉列表中显示与输入字段中输入的字符匹配的内容。要匹配的项目集是 ['alpha', 'beta', 'gamma', 'delta'] 但如果我输入 a，什么都不会显示，但它们应该都显示出来，因为 a 对所有人都是通用的。感谢任何帮助。

以下是我设置测试应用程序的步骤：

$ yo angular
Include twitter bootstrap Y
Twitter bootstrap with Compass N
Included all modules and took defaults for the rest

$ bower install angular-bootstrap --save

$ bower install angular-ui-bootstrap --save

编辑 app/views/main.html (sn-p):

            <div class="jumbotron">
                <h1>'Allo, 'Allo!</h1>
                <p class="lead">Always a pleasure scaffolding your apps.</p>
                <p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
            </div>

            <!-- Added this to verify that $scope.shows is available (and it is) -->
            <h2>Shows</h2>
            <ul ng-repeat="show in shows">
            <li>{{show}}</li>
            </ul>

            <!-- This is what is not working -->
            <h2>typeahead</h2>
            <input type="text" ng-model="selected" typeahead="show for show in shows | filter:$viewValue | limitTo:8" class="form-control">

            <div class="row marketing">
                <h4>HTML5 Boilerplate</h4>

已编辑 app/scripts/controllers/main.js：

            'use strict';

            angular.module('wtfoApp', ['ui-bootstrap'])
              .controller('MainCtrl', function ($scope) {
                $scope.awesomeThings = [
                  'HTML5 Boilerplate',
                  'AngularJS',
                  'Karma'
                ];
                $scope.shows = ['alpha', 'beta', 'gamma', 'delta'];
              });

非常感谢。

编辑：忘记依赖 [ui-bootstrap]。这可能是我的问题的解决方案，但我无法添加它。 Firebug 抱怨它找不到 ui-bootstrap。我还尝试了 [bower_components/angular-bootstrap/ui-bootstrap] 和 [bower_components/angular_bootstrap]。不过已经很晚了，所以我必须在早上再去取它。

编辑 2：遵循 vucalur 的添加 angular-ui-bootstrap 的建议。这在 bower_components/angular-ui-bootstrap 下添加了一个模板文件夹

进行了此更改：[ui-bootstrap] -> ['ui-bootstrap']。没有页面显示，Firebug 的错误是：

[$injector:modulerr] 无法实例化模块 ui-bootstrap，原因是：[$injector:nomod] 模块 'ui-bootstrap' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

编辑 3：通过重新运行 yo 和 bower 进行重构（使用 bower 尝试添加 --save 开关）。结果相同。就像缺少一个类路径一样的东西，它不允许我引用 bower_components 中的依赖项。

【问题讨论】：

angular.module('wtfoApp', ['ui-bootstrap']) 应该是 angular.module('wtfoApp', ['ui.bootstrap'])

标签： angularjs angular-ui yeoman angular-ui-bootstrap angular-ui-typeahead

【解决方案1】：

尝试ui.bootstrap 而不是ui-bootstrap：你想要的是句号，而不是破折号。

【讨论】：

【解决方案2】：

看看this 提交。（如果我们做了一些变基并且链接不再有效：https://github.com/vucalur/django-wibses, "feat(token-dropdown) ..." commit。）

该项目使用 yeoman。
后端使用的是 CoffeeScript 和 Python，但我希望你能掌握它。
物品是从服务器获取的 - JSONP 和 $http 承诺 api 来发挥作用，但如果您在客户端有物品，您可能不需要它。
另请注意，您不需要使用 angular-ui-bootstrap 的 bootstrap3 分支。
依赖是"angular-ui-bootstrap": "~0.9.0"，而不是angular-boostrap。至少这对我有用。

【讨论】：