2

我的路线 /search 显示了一个模板和相关的控制器，它们显示了我的数据库中的条目列表（使用从控制器正确绑定数据到使用 $scope 变量的模板）。所以如果我去 /search 它只是工作并显示数据。

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

Angular 的方法是什么？

这是我最终做到的方式：

我的路线：

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: '/' });
}]);

全局布局：

<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;
  });

});

和模板 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>
4

1 回答 1

0

好的，现在我更好地理解了你想要做什么。以下是我将如何尝试这样做，我有限的角度经验：

  • 定义一个 SearchService
  • 将此服务注入主控制器，主控制器处理搜索文本字段
  • 让这个主控制器在每次更改时在搜索服务中设置搜索文本值，如果还没有，则将位置设置为 /search
  • 有一个与显示搜索结果的 div 关联的搜索控制器
  • 在这个搜索控制器中，注入 SearchService
  • 在这个搜索控制器中，用于$scope.watch()每次修改 SearchService 中存储的搜索文本值时都会收到通知
  • 每次修改搜索文本值时，执行一个 HTTP 请求获取搜索结果，将结果存储在作用域中，并让视图对结果进行迭代。
于 2013-08-20T08:49:17.730 回答