Vorlage konnte nicht geladen werden: template/typeahead/typeahead.html in Ruby on rails App

Question

Ich habe eine laufende Angular-App in meinem Ruby on Rails-Projekt und möchte nun einige typeahead-Suchen mit angular.js implementieren und nicht finden die Lösung wie man typeahead directive running macht.

Frage: Wie Winkel Typahead Direktive in meinem Projekt zu installieren?

Mit vorliegender Lösung beschrieben unten ich diese Konsole bin immer:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html 

• ng-App arbeitet und damit verbundene js und CSS-Dateien in HTML-verknüpft als auch.

Ich verfolge diese Quelle: bootstrap-ui-angularjs

Was habe ich schon:

1. heruntergeladen angular-ui-bootstrap.js in public\assets\javascripts Verzeichnis

2. manifestierten Asset-Pipeline in der Regel:

   // = erfordert jquery // = require jquery_ujs // = erfordert jquery.tokeninput // = bootstrap erforderlich // = erfordert eckig // = erfordert angular-ui-bootstrap // = require_tree.

3.checked wenn js auf der Seite sind: (nur Skripte in Frage)

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

Gibt es etwas, was ich im Zusammenhang fehle der Installation bestehende Winkel Richtlinien ? z.B. von this link

Answer 1

Der GitHub-Code enthält auch einen folder called template, in dem sich ein Vorlagenordner für typeahead befindet. Haben Sie das heruntergeladen und zu Ihrem Projekt am richtigen Ort hinzugefügt.

Der Fehler scheint aufgrund dieser typeahead Vorlage HTML-Datei zu kommen fehlt. Wenn es hinzugefügt wurde, überprüfen Sie, ob der Standort korrekt ist.

Answer 2

Lösung:

1. einen neuen Ordner public\template\typeahead

2. herunterladen typeahead.html von this source in das Verzeichnis in Schritt 1.

Answer 3

Sie können die Vorlagen Ihrer Webseite hinzufügen, erstellt erstellen wenn die Datei ui-bootstrap-tpls.js nicht funktioniert oder wenn Sie den ui-bootstrap verwenden möchten.js-Datei:

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

Answer 4

Stellen Sie sicher, dass Sie die richtige .js-Datei enthalten, die die Vorlagen enthält.

I ersetzt "ui-bootstrap.min.js" mit "ui-Bootstrap-tpls.min.js"

Dieses es für mich fixiert. Siehe auch What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

Answer 5

Anstatt ui-bootstrap.js zu verwenden, können Sie ui-bootstrap-tpls.js verwenden. Diese js-Datei wird mit den Vorlagen geliefert.

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

UND in Ihrem Modul müssen Sie fügen Sie diese Abhängigkeiten:

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

Um ui-Bootstrap-tpls.js Sie müssen js-Datei auf Ihrem html hinzufügen verwenden Wenn Sie diese 2 Schritte ausführen, erhalten Sie diese Nachricht nicht mehr:

Fehler beim Laden der Ressource: der Server reagiert mit einem Status von 404 (nicht gefunden) _http: // localhost: 3000/template/typeahead/typeahead.html

Was oft passiert ist, dass die Menschen nur die js-Datei hinzufügen und vergessen die Abhängigkeit hinzufügen zum Modul.