Impossibile caricare template: template/typeahead/typeahead.html in Ruby on rails app

Question

Ho un'applicazione Angular in esecuzione nel mio progetto ruby ​​on rails e ora voglio implementare una ricerca typeahead usando angular.js e non riesco a trovare la soluzione come fare typeahead directive running.

Domanda: Come installare la direttiva angolare typeahead nel mio progetto?

Con la soluzione attuale descritto muggito sto ottenendo questa console:

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

• ng-app funziona e js e dei file correlati css legata in html pure.

Sto seguendo questa fonte: bootstrap-ui-angularjs

Quello che ho fatto già:

1. scaricato angular-ui-bootstrap.js in public\assets\javascripts directory

2. manifestato un'attività condotta come di solito:

   // = richiede jquery // = richiede jquery_ujs // = richiede jquery.tokeninput // = richiede bootstrap // = richiede angolare // = richiede angular-ui-bootstrap // = require_tree.

3.checked se js sono sulla pagina: (solo gli script in questione)

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

C'è qualcosa che cosa manco in relazione all'installazione direttive angolari esistenti ? per esempio. da this link

Answer 1

Il codice GitHub contiene anche uno folder called template, all'interno del quale è presente una cartella modello per typeahead. Lo hai scaricato e aggiunto al tuo progetto nella posizione corretta.

L'errore sembra essere venuta a causa di questo file html modello typeahead mancante. Nel caso sia stato aggiunto controlla se la posizione è corretta.

Answer 2

Soluzione:

1. creare una nuova cartella public\template\typeahead

2. scaricare typeahead.html da this source nella directory creata al punto 1.

Answer 3

È possibile aggiungere i modelli per la tua pagina web se il file ui-bootstrap-tpls.js non funziona o se si desidera utilizzare ui-bootstrap.js file:

<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

Assicurarsi di includere il file .js corretto che contiene i modelli.

ho sostituito "ui-bootstrap.min.js" con "ui-bootstrap-tpls.min.js"

questa fissa per me. Vedi anche What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

Answer 5

Invece di usare ui-bootstrap.js, è possibile utilizzare ui-bootstrap-tpls.js. Questo file js viene fornito con i modelli.

Per utilizzare ui-bootstrap-tpls.js si deve aggiungere il file js al vostro HTML:

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

E nel modulo è necessario aggiungere queste dipendenze:

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

Se esegui questi 2 passaggi non riceverai più questo messaggio:

Impossibile caricare la risorsa: il server ha risposto con uno stato di 404 (Not Found) _http: // localhost: 3000/template/typeahead/typeahead.html

Quello che succede spesso è che la gente solo aggiungere il file js e dimenticare di aggiungere la dipendenza al modulo.