テンプレートをロードできませんでした：Ruby on railsアプリケーションのテンプレート/ typeahead/typeahead.html

Question

私はruby on railsプロジェクトでAngular-appを実行していましたが、angular.jsを使って先読み検索を実装したいと思いますどのように解決策を作るtypeahead directive running。

質問：Angle Typeaheadディレクティブをプロジェクトにインストールするにはどうすればよいですか？怒鳴る私はこのコンソールを取得しています説明した本ソリューションにより

：

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

• NG-アプリが働いているとの関連のjsとcssファイルも同様に、HTMLにリンク。

私は、次の午前、このソース：bootstrap-ui-angularjs

私はすでにやった：

1. が public\assets\javascriptsディレクトリとして通常

2. 積荷目録アセットパイプラインにangular-ui-bootstrap.jsをダウンロード：

   // = jqueryが必要です // = jquery_ujsが必要です // jquery.tokeninputが必要です //ブートストラップが必要です //角度が必要です //角度付きui-bootstrapが必要です // = require_tree。 jsがページ上にある場合3.checked

：（問題の単なるスクリプト）

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

私は既存の角度指令をインストールするに関連して行方不明です何何かがあります？例えばthis link

Answer 1

GitHubコードには、先読みテンプレートフォルダがあるfolder called templateも含まれています。それをダウンロードし、正しい場所にプロジェクトに追加しましたか？

エラーが欠落により、この先行入力テンプレートのhtmlファイルに来ているようです。追加されている場合は、場所が正しいかどうかを確認してください。

Answer 2

ソリューション：

1. は、ステップ1

Answer 3

で作成したディレクトリにthis sourceから新しいフォルダpublic\template\typeahead

ダウンロードtypeahead.htmlを作成するあなたのウェブページにテンプレートを追加することができます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> 

Answer 4

テンプレートを含む正しい.jsファイルを必ず含めてください。

私はこれが私のためにそれを固定

を "UI-ブートストラップ・tpls.min.js" と "UI-bootstrap.min.js" を置き換えます。また、参照してくださいWhat is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

Answer 5

ui-bootstrap.jsを使用する代わりに、ui-bootstrap-tpls.jsを使用できます。このjsファイルにはテンプレートが付属しています。あなたはこれらの依存関係を追加する必要があり、あなたのモジュールで

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

と：

あなたがHTMLにjsのファイルを追加する必要があり、UI-ブートストラップ・tpls.jsを使用するには

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

この2つの手順を実行すると、このメッセージは表示されなくなります。

リソースの読み込みに失敗しました：サーバは404 （見つかりません）_HTTPの状態で応答：// localhostを：3000 /テンプレート/先行入力/ typeahead.html何頻繁に発生すると、人々は唯一のjsファイルを追加し、依存関係を追加することを忘れていることである

モジュールに接続します。