ruby-on-rails - 无法在 Ruby on rails 应用程序中加载模板 : template/typeahead/typeahead. html

Question

我在我的 ruby​​ on rails 项目中有一个正在运行的 Angular 应用程序，现在我想使用 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目录

通常表现为 Assets 管道:

//= 需要 jquery
//= 需要 jquery_ujs
//= 需要 jquery.tokeninput
//= 需要 Bootstrap
//= 需要 Angular
//= 需要 angular-ui-bootstrap
//= 要求树。

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>

在安装现有的 Angular 指令方面我有什么遗漏吗？例如来自 this link

Answer 1

您可以使用 ui-bootstrap-tpls.js，而不是使用 ui-bootstrap.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']);

如果您执行这两个步骤，您将不会再收到此消息:

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

经常发生的情况是人们只添加了js文件而忘记了向模块添加依赖。