Question

在我的项目早期，我无法隔离我的一些观点，并且必须直接在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而不是直接将它放在那里。

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

Answer 1

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

因此，应将nav.html中的输入字段修改为如下所示：

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

Answer 2

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

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

移动到ng-include（AngularJS）时，搜索过滤器不再有效

2 个答案: