Не удалось загрузить шаблон: template/typeahead/typeahead.html в приложении Ruby on rails

У меня работает Angular -app в моем проекте ruby ​​on rails, и теперь я хочу реализовать некоторый поиск типа с использованием angular.js и не могу найти решение, как сделать typeahead directive running.

Вопрос: Как установить директиву angular typeahead в мой проект?

С настоящим решением, описанным ниже, я получаю эту консоль:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html
  • ng-app работает и связан с js и css файлами, связанными с html.

Я следую этому источнику: bootstrap-ui-angularjs

Что я уже делал:

  • загружен angular-ui-bootstrap.js в public\assets\javascripts
  • как правило, показан конвейер ресурсов:

    //= требуется jquery // = требуется jquery_ujs // = требуется jquery.tokeninput // = требуется перезагрузка // = требуется angular // = требуется Angular -ui-bootstrap // = require_tree.

3.checked, если js находится на странице: (только в сценариях)

<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui-bootstrap.js?body=1" type="text/javascript"></script>

my ng-app:

    <div ng-app='plunker'>

      <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <pre>Model: {{result | json}}</pre>
        <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
      </div>

    </div>

<script>

    angular.module('plunker', ['ui.bootstrap']);
    function TypeaheadCtrl($scope, $http, limitToFilter) {

        //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

        $scope.cities = function(cityName) {
            return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){
                return limitToFilter(response.data, 15);
            });
        };

    }

</script>

Есть ли что-то, чего мне не хватает в связи с установкой существующих директив angular? например от эта ссылка

Ответ 1

Код GitHub также содержит папку называемую шаблоном, внутри которой есть папка шаблона для typeahead. Вы загрузили это и добавили в свой проект в нужном месте.

enter image description here

Похоже, что ошибка возникает из-за отсутствия файла html-шаблона этого типа. Если он был добавлен, проверьте правильность местоположения.

Ответ 2

Вместо использования ui-bootstrap.js вы можете использовать ui-bootstrap-tpls.js. Этот файл js поставляется с шаблонами.

Чтобы использовать ui-bootstrap-tpls.js, вы должны добавить js файл в свой html:

<script src="/scripts/angular-ui/ui-bootstrap-tpls.js"></script>

И в вашем модуле вы должны добавить эти зависимости:

angular.module('myModule', ['ui.bootstrap', 'ui.bootstrap.typeahead']);

Если вы сделаете эти 2 шага, вы больше не получите это сообщение:

Не удалось загрузить ресурс: сервер ответил статусом 404 (Не найдено) _http://localhost: 3000/template/typeahead/typeahead.html

Часто случается так, что люди добавляют только файл js и забывают добавить зависимость к модулю.

Ответ 3

Вы можете добавить шаблоны на свою веб-страницу, если файл ui-bootstrap-tpls.js не работает или вы хотите использовать файл ui-bootstrap.js:

<script type="text/ng-template" id="template/typeahead/typeahead-popup.html">
<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">
        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
</ul>
</script>

<script type="text/ng-template" id="template/typeahead/typeahead-match.html">
    <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</script>

Ответ 5

Решение:

  • создать новую папку public\template\typeahead

  • загрузите typeahead.html из этот источник в каталог, созданный на шаге 1.