Angularjs Ionic v1全局$ionicPopover菜单

Angularjs Ionic v1全局$ionicPopover菜单,angularjs,ionic-framework,ionic-view,Angularjs,Ionic Framework,Ionic View,对于我的ionic v1应用程序,我需要在右角添加一个标题菜单(如引导菜单)。当我单击此按钮时,我需要显示具有相同ng click事件的菜单。对于图形要求,我需要一个菜单,没有侧菜单。 找到$ionicPopover,我想这就是我的解决方案。 我的问题是关于菜单功能。我的想法是对所有菜单使用html模板,并将popover函数放在我的所有应用程序都可访问的地方。有可能吗? 找到了唯一一个我需要为每个控制器实现popover功能的示例。 例如,这是一个简单的控制器。我需要为我的所有项目全局定义po

对于我的ionic v1应用程序,我需要在右角添加一个标题菜单(如引导菜单)。当我单击此按钮时,我需要显示具有相同ng click事件的菜单。对于图形要求,我需要一个菜单,没有侧菜单。 找到$ionicPopover,我想这就是我的解决方案。 我的问题是关于菜单功能。我的想法是对所有菜单使用html模板,并将popover函数放在我的所有应用程序都可访问的地方。有可能吗? 找到了唯一一个我需要为每个控制器实现popover功能的示例。 例如,这是一个简单的控制器。我需要为我的所有项目全局定义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
   });
})
.controller('DashCtrl',函数($scope、$ionicLoading、$ionicPopover){
//.fromTemplate()方法
变量模板=“”+“”+
“Popover标题”+
''+ '' +
“Popover内容!”+“+”;
$scope.popover=$ionicPopover.fromTemplate(模板{
范围:$scope
});
$scope.openPopover=函数($event){
$scope.popover.show($event);
};
$scope.closePopover=函数(){
$scope.popover.hide();
};
//等我们把爆米花清理干净!
$scope.$on(“$destroy”,函数(){
$scope.popover.remove();
});
//对隐藏popover执行操作
$scope.$on('popover.hidden',function(){
//执行操作
});
//对移除popover执行操作
$scope.$on('popover.removed',function(){
//执行操作
});
})

如我在评论中所述,您应该创建一个根模板视图,其中包含一个单独的控制器,该控制器保存所有视图共享的逻辑。以以下设置为例:

根模板:(包含菜单按钮)

DashCtrl
中,您将使用您的逻辑来处理弹出窗口。因此,该控制器必须实现
showMenu($event)
功能


如果您确实需要一个用于popover的模板,您可以在templates/root.html的html中或在**RootController.js的代码中定义该模板“

最后,我在一个控制器中创建了一个函数,带有一个公共菜单头。谢谢。

我知道OP解决了他的问题,但采取了与最初要求不同的方式。OQ是如何进行全局popover…公认的答案是改为进行控制器视图

但要制作全球流行音乐,我就是这样做的。我确信,由于$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.globalpover(a、b、c、d、e、f、g)


如果你不需要在任何地方都使用它,比如在你的应用程序init/register/startup controllers中,可以将所有这些都放在你的Tabs控制器中。

你是否为每个页面都有一个单一的视图模板?通常,您会有某种根模板来包装所有ui路由器视图。此根模板将是此类弹出菜单的适当位置。页面具有不同的布局。我需要为所有人添加一个公共标题,并将其放入菜单中。谢谢。现在我有了。但我需要的是实现showMenu($event)功能的单点。在这种情况下,如果我有3个控制器,我需要为单个控制器实现此功能。谢谢
<!-- 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'
            }
        }
    })
  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();
  }