Плагин Typeahead в angular-bootstrap у меня не работает

Я не могу заставить функцию опережения ввода в angular-bootstrap работать в простой среде, созданной йоманом. Я ожидаю, что смогу начать вводить текст в поле ввода и отображать в раскрывающемся списке символы, введенные в поле ввода. Набор элементов для сопоставления: ['альфа', 'бета', 'гамма', 'дельта'], но если я наберу а, ничего не появится, но они все должны появиться, поскольку а является общим для всех. Цените любую помощь.

Вот шаги, которые я предпринял для настройки своего тестового приложения:

$ 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 (фрагмент):

            <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>

Отредактированное приложение/скрипты/контроллеры/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.


person Strat-O    schedule 08.01.2014    source источник
comment
angular.module('wtfoApp', ['ui-bootstrap']) должен быть angular.module('wtfoApp', ['ui.bootstrap'])   -  person Rajiv Pingale    schedule 23.03.2016


Ответы (2)


Попробуйте ui.bootstrap вместо ui-bootstrap: вам нужна точка, а не тире.

person user3207753    schedule 17.01.2014

Взгляните на этот коммит. (На случай, если мы сделаем перебазирование и ссылка больше недействительна: https://github.com/vucalur/django-wibses, "feat(token-dropdown) ..." commit.)

  • В проекте используется yoman.
  • Это CoffeeScript и Python на бэкэнде, но я надеюсь, что вы получите что-то из этого.
  • Предметы получаются с сервера - JSONP и $http обещают апи поиграть, но скорее всего ты выиграл' Это не нужно, если у вас есть элементы на стороне клиента.
  • Также обратите внимание, что вам не нужно будет использовать ветвь bootstrap3 angular-ui-bootstrap.
  • Зависимость "angular-ui-bootstrap": "~0.9.0", а не angular-boostrap. По крайней мере, это работает для меня.
person vucalur    schedule 08.01.2014