无法在 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

我已经做了什么：

1. 下载angular-ui-bootstrap.js到 public\assets\javascripts目录

2. 像往常一样显示资产管道：

   //= 需要 jquery //= 需要 jquery_ujs //= 需要 jquery.tokeninput //= 需要引导 //= 需要角度 //= 需要 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>

在安装现有的角度指令方面我缺少什么吗？例如来自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>

AND 在您的模块中，您必须添加这些依赖项：

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

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

加载资源失败：服务器响应状态为 404 （未找到）_http://localhost:3000/template/typeahead/typeahead.html

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

Answer 2

GitHub 代码还包含一个folder called template，其中有一个用于预先输入的模板文件夹。您是否已将其下载并添加到正确位置的项目中。

此错误似乎是由于缺少此 typeahead 模板 html 文件。如果已添加，请检查位置是否正确。

Answer 3

如果 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-bootstrap.min.js”替换为“ui-bootstrap-tpls.min.js”

这为我解决了问题。另见What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

Answer 5

解决办法：

1. 新建文件夹public\template\typeahead

2. 将typeahead.html从this source下载到步骤1中创建的目录中。