Ionic v1 全局 $ionicPopover 菜单答案

【问题标题】：Ionic v1 global $ionicPopover menuIonic v1 全局 $ionicPopover 菜单
【发布时间】：2017-11-18 21:29:14
【问题描述】：

对于我的 ionic v1 应用程序，我需要在右上角添加一个标题菜单（如引导菜单）。当我单击此按钮时，我需要显示具有相同 ng-click 事件的菜单。对于图形要求，我需要一个菜单并且没有侧面菜单。找到 $ionicPopover，我认为这是我的解决方案。我的问题是关于菜单功能。我的想法是为所有菜单使用一个 html 模板，并将弹出框功能放在我所有应用程序可访问的地方。有可能吗？找到了唯一一个我需要为每个控制器实现 popover 功能的例子。例如，这是一个简单的控制器。我需要为我的所有项目全局定义 popover 函数。弹出框定义相同。有可能吗？谢谢。

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

【问题讨论】：

每个页面都有一个视图模板吗？通常，您将拥有某种包装所有 ui-router 视图的根模板。此根模板将是此类弹出菜单的合适位置。
页面有不同的布局。我需要为所有人添加一个通用标题并将其放入菜单中。谢谢

标签： angularjs ionic-framework ionic-view

【解决方案1】：

就像我在评论中所说的那样，您应该创建一个带有单独控制器的根模板视图，该控制器包含所有视图共享的逻辑。以如下设置为例：

“根模板”：（包含菜单按钮）

<!-- templates/root.html -->
<div>
    <ion-nav-bar class="bar-positive">
         <ion-nav-buttons side="right">
            <button class="button icon ion-android-more-vertical" ng-click="showMenu($event)"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="content"></ion-nav-view>
</div>

Dash 模板：

<!-- views/dash.html -->
<ion-view view-title="Dash View">
    <ion-content>
        Hello World!
    </ion-content>
</ion-view>

各州：

$stateProvider
    .state('root', {
        url: '/root',
        abstract: true,
        templateUrl: 'templates/root.html',
        controller: 'RootCtrl'
    })

    .state('root.dash', {
        url: '/sub',
        views: {
            'content': {
                controller: 'DashCtrl',
                templateUrl: 'views/dash.html'
            }
        }
    })

在DashCtrl 中，您将使用您的逻辑来处理弹出窗口。因此这个控制器必须实现showMenu($event)函数。

如果您确实需要一个弹出框模板，您可以在 templates/root.html 的 html 中或在 **RootController.js 的代码中定义模板。 p>

【讨论】：

是的。现在我有了。但我需要的是实现 showMenu($event) 函数的单点。在这种情况下，如果我有 3 个控制器，我需要为单个控制器实现此功能。谢谢。

【解决方案2】：

最后，我在单个控制器中创建单个函数，并带有一个通用菜单标题。谢谢。

【讨论】：

【解决方案3】：

我知道 OP 解决了他的问题，但以不同于最初要求的方式解决了问题。 OQ 是如何做一个全局弹出框...接受的答案是做控制器视图。

但是要做一个全局弹出框，我就是这样做的。我确信有些人可能会因为 $rootScope 的依赖性而反对这一点，但它是一个可行的解决方案：

在 app.js 中：

  var popoverPromise = $ionicPopover.fromTemplateUrl('templates/windowPopup.html', {
    scope: $rootScope,
    focusFirstInput:false
  });
  popoverPromise.then(function(popover) {
    $rootScope.msgPopover = popover;
  });
  
  $rootScope.globalPopover = function(tpt,tps,tpm,tps1,tpm1,tpa,tpc) {
    popoverPromise.then(function(popover) {
      $rootScope.popInfo.title = tpt ;
      $rootScope.popInfo.sub = tps ;
      $rootScope.popInfo.msg = tpm ;
      $rootScope.popInfo.sub1 = tps1;
      $rootScope.popInfo.msg1 = tpm1 ;
      $rootScope.popInfo.action = tpa ;
      $rootScope.popInfo.color1 = tpc ;
      $popover.show();
    }) ;
  }
  $rootScope.globalClosePopover = function() {
    $rootScope.msgPopover.hide();
  }

然后从需要它的所有各种控制器中，注入 $rootScope： $rootScope.globalPopover(a,b,c,d,e,f,g) ;

如果您在任何地方都不需要它（例如在您的应用程序中的 init/register/startup 控制器中），上述方法的替代方法是将所有这些都放在您的 Tabs-Controller 中。

【讨论】：