当用户开始在输入框中输入时，如何使用AngularJS加载新页面

“我的路线/搜索”显示了一个模板和相关控制器，其中显示了我数据库中的条目列表（使用$scope变量将数据从控制器正确绑定到模板）。因此，如果我去/搜索，它只工作并显示数据

现在我在页面顶部添加了一个搜索框。当用户开始输入时，无论他在网站上的何处，我都希望立即显示结果（显示带有结果的模板）

什么是有角度的方法

---

以下是我最终如何做到的：

我的路线：

App.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', { templateUrl: '<%= asset_path "welcome/index.html" %>' });
  $routeProvider.when('/search', { templateUrl: '<%= asset_path "search/index.html" %>', controller: 'SearchController' });
  $routeProvider.otherwise({ redirectTo: '/' });
}]);

App.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/'，{templateUrl:'}）；
$routeProvider.when（'/search'，{templateUrl:''，controller:'SearchController'}）；
$routeProvider。否则（{重定向到：'/'}）；
}]);

全局布局：

<form class="navbar-form navbar-left" role="search" data-ng-controller="SearchController">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="search" data-ng-model="query" />
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

<div data-ng-view></div>

搜寻

控制员：

angular.module('tastyPie.controllers')

.controller('SearchController', function($scope, Search) {

  // Bind to the view
  $scope.searchResults = [];
  $scope.query = '';

  // if the user is not on the search page and start typing, move him to the search page and perform a search
  $scope.$watch('query', function(new_data, old_data) {
    if (new_data == old_data) return;

    if ($location.path().indexOf('/search') < 0)
      $location.path('search');

    $scope.search();
  });

  $scope.search = function() {
    var s = new Search();
    s.query = $('#query').val();
    s.execute();
  };

  // callback from the search services which returns the results
  $scope.$on('searchResults', function(object, results){
    $scope.searchResults = results;
  });

});

angular.module（'tastype.controllers'））
.controller（'SearchController'，函数（$scope，Search）{
//绑定到视图
$scope.searchResults=[]；
$scope.query=''；
//如果用户不在搜索页面并开始键入，请将其移动到搜索页面并执行搜索
$scope.$watch（'query'，函数（新数据、旧数据）{
if（new_data==old_data）返回；
if（$location.path（）.indexOf（'/search'）<0）
$location.path（'search'）；
$scope.search（）；
});
$scope.search=函数（）{
var s=新搜索（）；
s、 query=$（'#query'）.val（）；
s、 执行（）；
};
//返回结果的搜索服务的回调
$scope.$on（'searchResults'，函数（对象，结果）{
$scope.searchResults=结果；
});
});

和模板search/index.html：

<ul class="list-group" ng-init="search()">
  <li class="list-group-item" ng-repeat="result in searchResults">
    <strong>{{result.title_texts}}</strong>
    <br />
    {{result}}
  </li>
</ul>

{{result.title_text}}


{{result}}

好的，现在我更明白你想做什么了。以下是我如何利用我有限的角度经验来尝试做到这一点：

• 定义搜索服务
• 将此服务注入主控制器，主控制器处理搜索文本字段
• 让此主控制器在每次更改时在搜索服务中设置搜索文本值，并将位置设置为/search（如果尚未设置）
• 将搜索控制器与显示搜索结果的div关联
• 在此搜索控制器中，注入SearchService
• 在此搜索控制器中，使用

  $scope.watch（）

  在每次修改SearchService中存储的搜索文本值时收到通知
• 每次修改搜索文本值时，执行HTTP请求以获取搜索结果，将结果存储在范围中，并让视图遍历结果

---

您应该在AngularJS中为此创建一个指令。AngularJS的方法是每次输入值更改时执行HTTP请求，并使用ng REPLAT指令显示结果，例如。读取输入[type=text]、ngRepeat和$http的文档。我使用控制器和模板之间的$scope变量（并使用$http，ng repeat）对数据进行了正确绑定。我只是不知道当用户开始键入查询时如何显示所有这些内容？那么，您的代码在哪里？刚刚添加了代码！：）是的，对不起，我正在使用slim模板。当我添加search（）调用时，我得到以下错误：“错误：没有控制器：ngModel”。我还需要添加其他内容吗？首先编辑您的问题并发布正确的、更新的HTML代码。@vincentp：既然HTML代码已经发布，请重新阅读我答案的最后一部分。忘掉你的观点吧。在与搜索输入相同的HTML页面中发布ng repeat，在表单内部，不带ng init属性：ng repeat从控制器的作用域获取其结果，因此它必须位于具有ng controller属性的元素内部。感谢您的回答，但我在转到/search时它已经工作了，我的问题是，当我在主页（/）上并且开始在输入框中输入时，如何加载模板内容。我已经添加了我的路线和更多的代码，所以我希望它会变得更有意义很多，我终于让它工作了，我用最终的代码更新了我的问题！