Angularjs - 分離全球搜索和頁面內容？

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/