Question

我的简单角度应用到目前为止有三页;每个页面都有自己的控制器，可以处理与用户和后端系统的各种交互。我想添加一个包含搜索栏的div标题，就像你在StackOverflow上的每个页面顶部看到的一样！。

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

我目前的设置是（片段）：

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中正确集成搜索导航栏？

Answer 1

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

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

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

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

1 个答案: