javascript - 如何在 Angular.js 中从不同 View 搜索项目

Question

在我家:

.state('home',{
        url: '',
        views: {
           '': {
            templateUrl: 'views/main.html',
            controller:'MainCtrl'
           }
    ...

我循环浏览一些书籍，并且还有一个简单的搜索字段来过滤项目:

<input type="text" ng-model="search">
<article class="items" ng-repeat="book in allBooks  | filter: search" >

这可行，但我想在侧边栏中添加输入字段，并将该侧边栏放在单独的 View 中 - 这样我就不必在每个 View 中重复它。所以在我的 index.html 中我有以下代码

 <div ng-include ng-controller="MainCtrl" src="'views/sidebar.html'" class="sidebar"></div>
 <div class="container" ui-view></div>

假设这是一个很好的做法，有没有办法在侧边栏中添加搜索输入字段，并且仍然影响主状态下的循环？

谢谢

Answer 1

您可以将主状态设置为侧边栏的嵌套 View 。然后，您的过滤器在侧边栏 View 中绑定(bind)到的 ng-model 将可用于主状态。当主状态在自己的范围内找不到搜索属性时，将委托(delegate)给上面的侧边栏范围。

这是我的简单而肮脏的例子: http://plnkr.co/gmUaDLSfJxOL42EPZ9ak