Angularjs - 分离全局搜索和页面内容？答案

【问题标题】：Angularjs - separating global search and page contents?Angularjs - 分离全局搜索和页面内容？
【发布时间】：2015-02-09 20:47:50
【问题描述】：

到目前为止，我的简单 Angular 应用程序只有三个页面；每个页面都有自己的控制器来处理与用户和后端系统的各种交互。我想添加一个包含搜索栏的 div 标头，就像您在 StackOverflow 上每个页面的顶部看到的一样！

问题在于分离搜索栏和页面内容之间的控制器逻辑。我觉得它们应该放在单独的控制器中，以便代码可以模块化。搜索控制器将处理所有页面与搜索栏的交互以及显示搜索结果页面，而页面内容控制器将处理其特定页面内容的逻辑。

我当前的设置是（sn-ps）：

app.js

function appRouteConfig($stateProvider, $urlRouteProvider) {
    $stateProvider
    .state("landingpage", {
        url: '/',
        controller: "LandingPageCtrl",
        templateUrl: "views/html/landing.html"
    })
    .state("discussion", {
        url: '/discussion',
        controller: "DiscussionCtrl",
        templateUrl: "views/html/discussion.html"
    })
    .state("search_content", {
        url: "/search_results",
        controller: "SearchCtrl",
        templateUrl: "views/html/searchpage.html"
    })
}

controller.js

controllers.controller("SearchCtrl", ["$scope", "$location", 
    function($scope, $location) {
       $scope.search = function(query) {
           // Query backend server and redirect to /search_results with response.
       }
    }
]);

discussion.html

<div data-ng-include=" 'views/html/searchNav.html ' "></div>

<div class="discussion">
    <!-- Discussion html -->
</div>

但是这里的问题是我已经在 app.js 中为每个路由声明了一个控制器。所以当我访问/discussion时，会被加载的控制器是DiscussionCtrl，而搜索控制器不会被加载，所以搜索不会工作。

我可以删除路由中指定的所有控制器，然后手动设置它们，类似于：

<div ng-controller="SearchCtrl">
    ....
</div>

<div ng-controller="DiscussionCtrl">
    ....
</div>

这样我的两个控制器都将被加载，但是在我的所有页面中手动指定它似乎很痛苦。如果我将来要添加 20 多个新页面，它肯定不会很好地扩展（不会扩展），并且如果多个不同的路由使用同一个控制器，这很烦人。

另一种解决方案可能是我的每个控制器中都有一个doSearchSubmit()，但是由于搜索代码相同，因此所有控制器中的代码都是重复的（只需查询后端服务器并重定向到搜索结果页面），这不好。

我应该如何在 Angular 中正确集成搜索导航栏？

【问题讨论】：

您的搜索应该与模型相关联，这样您的每个控制器都可以执行SearchModel.search(searchCriteria) 之类的操作。 SearchModel.search 将返回数据。它不应该关心将数据返回给谁（您的控制器）
@Ronnie 你能详细介绍一下吗？如果我在/discussion 中时在搜索栏中搜索hello，则该页面应重定向到/search_results 并以有序的方式显示结果。我不确定如何将SearchModel.search() 放入其中。
正在搜索什么数据，它来自哪里？
这是一个通用搜索栏，它执行LIKE 数据库搜索，然后在 search_results 页面上显示结果。就像 Stackoverflow 一样。您输入一些搜索词，它会将您指向一个包含所有结果的页面。
jsfiddle.net/wabf2t09 这是一个基本示例，说明如何将模型实现到多个控制器中。显然，您需要改进搜索功能以搜索您拥有的任何数据。还有其他方法可以做到这一点。可能比这更好，但主要思想是您想从模型中检索数据。

标签： javascript angularjs angularjs-directive angular-ui-router

【解决方案1】：

您可以通过多种方式解决此问题，但我认为最好的方法是编写自定义指令或使用如下指令：

https://github.com/dnauck/angular-advanced-searchbox

演示： http://dnauck.github.io/angular-advanced-searchbox/

【讨论】：