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

Question

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

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

我当前的设置是(片段):

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 中为每个路由声明了一个 Controller 。因此，当我访问 /discussion 时，将加载的 Controller 将为 DiscussionCtrl，并且不会加载搜索 Controller ，因此搜索将无法工作。

我可以删除路由中指定的所有 Controller ，并手动设置它们，类似于:

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

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

这样我的两个 Controller 都会被加载，但是在我的所有页面上手动指定它似乎很痛苦。如果我将来添加 20 多个新页面(无法扩展)，它的扩展性肯定不会很好，并且如果多个不同的路由使用相同的 Controller ，它会很烦人。

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

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

Answer 1

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

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

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