Question

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

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

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

});

模板搜索/ 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>

Answer 1

好的，现在我更了解你想做什么。这是我尝试这样做的方式，我有限的角度经验：

定义SearchService
将此服务注入主控制器，该控制器处理搜索文本字段
让主控制器在每次更改时在搜索服务中设置搜索文本值，并将位置设置为/ search（如果不是这种情况）
让搜索控制器与显示搜索结果的div相关联
在此搜索控制器中，注入SearchService
在此搜索控制器中，每次修改存储在SearchService中的搜索文本值时，都会使用$scope.watch()通知
每次修改搜索文本值时，执行HTTP请求以获取搜索结果，将结果存储在范围内，并让视图迭代结果。

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

1 个答案: