10

ruby on rails プロジェクトで実行中の Angular アプリがあり、angular.js を使用して先行入力検索を実装したいのですが、.js を作成する方法を見つけることができませんtypeahead directive running。

質問: プロジェクトに angular typehead ディレクティブをインストールする方法を教えてください。

以下に説明する現在のソリューションでは、このコンソールを取得しています：

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

私がすでにしたこと：

  1. ディレクトリangular-ui-bootstrap.jsに ダウンロードpublic\assets\javascripts

  2. 通常どおりアセット パイプラインを明示します。

    //= jquery が必要 //= jquery_ujs が必要 //= jquery.tokeninput が必要 //= ブートストラップが必要 //= angular が必要 //= angular-ui-bootstrap が必要 //= require_tree .

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

既存の角度ディレクティブのインストールに関連して欠けているものはありますか? たとえば、このリンクから

4

5 に答える 5

16

ui-bootstrap.js を使用する代わりに、ui-bootstrap-tpls.js を使用できます。この js ファイルには、テンプレートが付属しています。

ui-bootstrap-tpls.js を使用するには、html に js ファイルを追加する必要があります。

<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 ファイルを追加するだけで、依存関係をモジュールに追加するのを忘れることです。

于 2014-10-21T21:25:05.070 に答える
9

GitHub コードにはtemplate というフォルダーも含まれており、その中には先行入力用のテンプレート フォルダーがあります。それをダウンロードして、プロジェクトの正しい場所に追加しましたか。

ここに画像の説明を入力

この先行入力テンプレートの html ファイルが見つからないため、エラーが発生しているようです。追加されている場合は、場所が正しいかどうかを確認してください。

于 2013-08-16T09:02:27.447 に答える