帶有刷新按鈕的AngularJS導航欄指令

Question

我在網上尋找解決方案，但找不到符合我需求的解決方案。試過this，並沒有幫助，看着this。

我的情況是，我設計了一個AngularJS的移動應用程序，該應用程序有一個導航欄。每一頁都有這個導航欄，因此，我決定將代碼移動到一個指令。導航欄中有一個按鈕，這個按鈕將用於強制刷新應用程序的數據（類似於facebook的拉動刷新）。導航欄顯示在所有頁面上，無論何時，只要用戶點擊按鈕，應用程序必須執行更新並重定向到某個頁面以顯示結果。

問題是，由於導航位於指令內部，用戶可以點擊任何屏幕，我如何管理捕獲點擊按鈕，調用刷新功能並重定向到頁面？

這是我的指令和我使用它的一個頁面。

myAppDirectives.directive('headerMenu', function() { 
return { 
    restrict: 'A', 
    templateUrl: 'partials/templates/header-menu.html' 
}; 
}); 

<div class="topcoat-navigation-bar"> 
<div class="topcoat-navigation-bar__item left quarter"> 
    <a class="topcoat-icon-button--quiet" snap-toggle> 
     <span class="topcoat-icon icon-menu-stack"></span> 
    </a> 
</div> 
<div class="topcoat-navigation-bar__item right three-quarters"> 
    <a class="topcoat-icon-button--quiet" href="" > <!-- THIS IS THE REFRESH BUTTON --> 
     <span class="topcoat-icon icon-refresh"></span> 
    </a> 
</div> 

頁例如：

<div header-menu></div> 
<div> MAIN CONTENT </div> 

謝謝！ 更新2：我很欣賞使用ui-router的答案。由於我的項目已經開始運行，幾乎已經準備就緒，所以這樣的結構性改變沒有問題。被接受的答案是解決了我的問題的答案，儘管其他答案可能更適合其他人。

Answer 1

只要把ngClick此按鈕：

<a class="topcoat-icon-button--quiet" ng-click="redirect()"> 

，並提供有關該指令的重定向功能範圍：

myAppDirectives.directive('headerMenu', function() { 
    return { 
     scope:{}, 
     restrict: 'A', 
     templateUrl: 'partials/templates/header-menu.html', 
     link: function(scope){ 
     scope.redirect = function(){ 
      // redirect to... 
     } 
     } 
    }; 
}); 

Answer 2

當我需要做到這一點時，我使用ui-router，並創建一個視圖層次結構，爲每個頁面加載導航欄。這樣我可以有例如navbar.html部分和狀態的設置如下所示：

$stateProvider 
    .state('header', url: '', templateUrl: 'header.html', controller: 'HeaderCtrl' }) 
    .state('header.page', url: '/somepage', templateUrl: 'page.html', controller: 'PageCtr' }) 
    .state(... 

Answer 3

我同意Matt Way，ui-router是同步導航欄的絕佳解決方案。儘管對於我的項目，我一直使用012iconfig和ui-router，並且您可以在主應用程序交互和導航欄之間獲得實時同步，從而無需「刷新按鈕」。另外，如果用戶想要返回上一頁，ui-router將保持應用「狀態」，表單/ UX/etc仍然和以前一樣。

看看ui-router wiki https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views。

基本演示與首部同步http://plnkr.co/edit/kYPGZw?p=preview

基本多視圖配置（viewC是NAV）：

$stateProvider 
.state('state1', { 
    url: "/", 
    views: { 
    "viewA": { 
     template: "1st Tab, index.viewA" 
    }, 
    "viewB": { 
     template: '1st Tab, index.viewB<br><a ui-sref=".list">Show List</a>' + 
       '<div ui-view="viewB.list"></div>' 
    }, 
    "viewC": { 
     template: '1st Tab, index.viewC <div ui-view="viewC.list"></div>' 
    } 
    } 
}) 
.state('state1.list', { 
    url: 'list', 
    views: { 
    "viewB.list": { 
     template: '<h2>Nest list viewB</h2><ul>' + 
       '<li ng-repeat="thing in tab1things">{{thing}}</li></ul>', 
     controller: 'Tab1ViewBCtrl', 
     data: {} 
    }, 
    "viewC.list": { 
     template: '1st Tab, list.viewC' 
    } 
    } 
})