Question

我的申请包括以下内容：

我的导航栏与搜索框一起放置的一个索引视图，它有一个navcontroller。两个html页面放在一个带有2个不同控制器的ngview元素中。 customercontroller和contactscontroller。 Theese 2页面有从服务中获取数据的表格。

如何将navbarcontroller中的值传递给其他2个控制器以过滤我的表？ Ng-View没有嵌套在navController范围内。

这是我的路线。

{{1}}

}）;

Answer 1

您可以使用angularjs自定义事件将信息从一个地方传递到另一个地方。

如此链接所示：

How do I create a custom event in an AngularJs service

Working with $scope.$emit and $scope.$on

您可以使用这些事件传递数据，这些事件可供侦听它们的函数使用。

Answer 2

您将找到许多关于如何在控制器之间进行通信的解决方案。正如@ArslanW所指出的，你可以使用事件。有些答案会要求您使用服务。

我认为，作为最佳做法，您需要将搜索文本存储在URL中作为查询参数。这样做的好处是，如果用户希望刷新屏幕，搜索结果将不会重置，因为您可以从URL的查询参数中读取搜索文本。

例如，查看Github.com的问题跟踪器。在那里，您可以搜索问题，即使您刷新，搜索结果或文本也不会丢失。

要实现这一点，你需要两个观察者。

NavController中的一位观察者观看搜索文本并将其复制到网址。

因此，如果您的搜索文本具有以下标记：

<input type="text" data-ng-model="searchText">

...您需要在输入模型上（在NavController）

中拥有以下观察者

$scope.$watch('searchText', function () {
    //This causes the URL to look like
    //http://localhost/#!/path?searchText=my%20search%text
    //where the search text is "my search text"
    $location.search('searchText', $scope.searchText);
});

现在URL已更新，您可以使用URL本身来确定要使用的搜索文本。

因此，在两个将显示表格的HTML视图（CustomerController和ContactsController的控制器中，您可以在搜索文本中查看更改：

$scope.$watch(function () {
    return $location.search().searchText;
}, function (value) {
    //The search text may be undefined - possible when the page
    //loads and the user has not entered anything in the search box
    if (value) {
        //"value" is the search text entered by the user.
        //You can then use this and proceed accordingly.
}
});

你已经用一块石头打了两个灌木丛。您的搜索文本存储在URL中，导致应用程序在刷新时不会丢失搜索文本。您还与每个控制器就所输入的搜索文本进行了沟通。

请注意，由于您要向搜索文本添加查询参数，因此您的页面将刷新。要防止这种情况发生，请将reloadOnSearch属性添加到您的路线并将其设置为false：

$routeProvider
    .when("/Customers", {
        templateUrl: "app/customers-list.html",
        controller: "customerController",
        reloadOnSearch: false
    });

根据searhbox中的值过滤表格行

2 个答案: