Question

这是关于Angular 1.4的新手问题。

我的主要问题

我有以下搜索视图：

'use strict';

var module = angular.module('myapp.search', ['ngRoute', 'ngResource']);

module.config(function ($routeProvider) {
    $routeProvider.when('/search', {
        templateUrl: 'search/search.html',
        controller: 'SearchCtrl'
    });
});

module.factory('Search', function ($resource) {

    return $resource('http://www.myapp.com/api/search', {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: false
        }
    });
});

module.controller('SearchCtrl', function ($scope, Search) {
    $scope.results = [];
    $scope.query = '';   
    $scope.doSearch = function (query) {
        Search.query({q: query}).$promise.then(function (result) {
            $scope.results = result.results;
        });
    };
});

部分HTML（search.html）：

#search.html

<input placeholder="search" ng-model="query" />
<button ng-click="doSearch(query)" />
<h1>Results</h1>
<ol>
  <li ng-repeat="result in results">{{ result }}</li>
</ol>
...

这很有效，问题是我想将搜索输入放在工具栏中（在index.html中定义）：

#index.html

<div ng-controller="SearchCtrl">
  <div class="toolbar">
    <input placeholder="search" ng-model="query" />
    <button ng-click="doSearch(query)">
  </div>
  ...

在这种情况下，通过按下搜索按钮，查询将在后端执行，但结果不会在$ scope中更新。怎么了？我试过调用$ scope。$ apply（）没有运气。我迷失了。

奖金问题

鉴于搜索功能位于工具栏中（始终可见），用户可以在网站的任何位置执行查询。如何将回复重定向到http://www.myapp.com/search？

提前致谢。

Answer 1

你有两个不同的SearchCtrl实例，每个实例都有自己独特的范围：一个在导航栏中（dur到ng-controller="SearchCtrl"），另一个在主视图中（由于controller: 'SearchCtrl'）。

因此，导航栏中的搜索会修改导航栏控制器的范围，而主视图的范围并不了解它。

如果您想在导航栏中搜索某些内容时进入搜索主视图，只需使用

即可

$location.url('/search?query=' + theEncodedQueryTypedByTheUser);

在搜索路径的解析函数或其控制器中，获取名为query的路径参数，发送HTTP请求，并使用结果更新范围。

使用AngularJS搜索工具栏

1 个答案: