如何在一个模板中使用 ng-repeat 从另一个模板获取过滤器查询？

Question

我有一个 Angular 应用程序，每个状态都包含两个组件：导航栏和导航栏下的组件。在下面我使用 ng-repeat 显示一些项目，我需要使用过滤器：

    <div class="col-sm-2 store__item col-centered" ng-repeat="book in vm.books | toArray | orderBy:query" >
     ...
    </div>

但是 ng-model="query" 在不同的模板中，属于导航栏组件：

<form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" ng-model="query">
        </div>
</form>

如何绑定它们，以便过滤器从导航栏获取查询？ 谢谢

Answer 1

一些建议，

1. 您可以将模型“查询”保留在 $rootScope 中，以便您的两个组件都可以访问同一个模型。
2. 使用 Angular 的事件管理器 $broadcast/$emit，这是我推荐的方式，因为它遵循解耦架构。