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

当我需要这样做时，我使用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 2

只需在此按钮上加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 3

我同意Matt Way，ui-router是同步导航栏的绝佳解决方案。虽然，对于我的项目，我一直在使用带有ui-router的Multiple Named Views配置，并且你能够在主应用程序交互和导航栏之间实现实时同步，无需“刷新按钮”。

此外，如果用户想要返回上一页，ui-router将维护app“state”，表单/ 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'
    }
  }
})

带有刷新按钮的AngularJS导航栏指令

3 个答案: