移动到 ng-include (AngularJS) 时，搜索过滤器不再起作用答案

【问题标题】：Search filter no longer working when moved into ng-include (AngularJS)移动到 ng-include (AngularJS) 时，搜索过滤器不再起作用
【发布时间】：2014-08-06 10:36:35
【问题描述】：

在我的项目的早期，我无法隔离我的一些视图，不得不直接在 index.html 中开发它们。具体来说，我的导航菜单。

现在我已经能够让ng-include 工作，我想将我的菜单拉到 nav.html 中。这完全没问题，并且仍然几乎完全按预期运行。

但我的菜单中有一个不再起作用的搜索栏。最初，即使我的导航菜单直接在 index.html 中，它过滤的内容也在 ng-view 中。不过，我想要过滤的视图和导航都在同一个控制器下，并且我没有更改 ng-view 组件。但是现在我已经隔离了 nav.html，搜索过滤器似乎不再具有约束力。

index.html：

...
<body>
    <div ng-include="'views/nav.html'"></div>
    <div ng-view></div>
    ...
</body>
...

nav.html：

<div class="nav">
    <div ng-controller="NavController">
        ...
        <div class="searchbar">
            <input type="text" name="input" value="Search" ng-model="search" /> 
<!--ng-model="search" is the binding component, as I understand-->
        </div> <!--end searchbar div-->
        ...
    </div> <!--end NavController div-->
</div> <!--end nav div-->

table.html：（ng-view中要过滤的内容）

<div ng-controller="NavController">
    <table>
        <tr class="title_bar">
            <td>Title</td>
            <td>A</td>
            <td>B</td>
        </tr>

        <tr ng-repeat="item in listOfItems | filter:search">
<!--table rows should be filtered by the search-->
            <td>{{item.title}}</td>
            <td>{{item.A}}</td>
            <td>{{item.B}}</td>
        </tr>
    </table>
</div>

我根本没有改变table.html，也没有改变nav.html。我只是将它隔离到它自己的 html 文件中并 ng-include'd 而不是直接将它放在那里。

有什么想法吗？我将不胜感激任何帮助。谢谢！

【问题讨论】：

标签： javascript html angularjs data-binding angularjs-filter

【解决方案1】：

这可能是一个较晚的答案，但它可能会帮助将来遇到此问题的任何人：我最近发现，当使用 ng-include 包含包含输入字段的文件时，ng-repeat 的过滤器似乎被破坏了。这是因为 ng-include 创建了一个新的（子）范围，您可以使用 $parent 范围表示法来解决问题：

所以你的 nav.html 中的输入字段应该修改为如下所示：

        <input type="text" name="input" value="Search" ng-model="$parent.search.$" />

【讨论】：

很高兴我终于找到了这个答案！谢谢！

【解决方案2】：

nav.html和table.html有同一个控制器NavController？如果拆分视图，为什么不拆分控制器？

我认为，如果您像拆分视图一样拆分控制器，那么一切都会正常工作。此外，如果您使用 de ng-view，您将使用路由，因此控制器将两次绑定到 table.html。

【讨论】：

最初他们有不同的控制器，但我希望导航能够影响表格，而我无法使用不同控制器中的数据来做到这一点。我有更多的过滤器将表格数据与导航连接起来，而不仅仅是搜索，我不确定如何将两者连接起来。（这最终是我想做的，但不知道怎么做，所以我只是把它们结合起来。）
您可以使用 rootscope 变量，该变量将包含将在表的过滤器中使用的搜索输入的值，我将为您创建一个示例，我可以邮寄给您吗跨度>