How to show ionicPopover by default

Question

To show ionicPopover by default, do not click or click any other event. Once the page or view is loaded, show a popover?

 cmr.controller('JoinMeeting', function($scope, $ionicPopover) { $ionicPopover.fromTemplateUrl('joinMrTips.html', { scope: $scope, }).then(function(popover) { $scope.popover = popover; }); $scope.$on('$viewContentLoaded',function(){ $scope.popover.show(); }); }) 

Answer 1

You were very close. According to the official documentation of IonicPopover, the syntax for popover.show () is as follows:

show ($ event) where the $ element or the target element that the popover should align next to

Therefore, rewriting the code will complete the task as follows:

 $scope.$on('$viewContentLoaded',function(){ $scope.popover.show(".class-of-host-control-of-popup"); }); 

Full example, along with the code -> here

Answer 2

This works without having to enable jQuery:

 $scope.$on('$viewContentLoaded',function(){ $scope.popover.show(angular.element(document.querySelector('.class-of-host-control-of-popup'))); }); 

Answer 3

An example that uses the Ionic "utils" classes (here, DomUtil):

  var nodeClass = 'target-host-item-class'; var evtTarget = $event.target; var hostNode = ionic.DomUtil.getParentOrSelfWithClass(evtTarget, nodeClass); $ionicPopover.fromTemplateUrl('popover-template.html', { scope: $scope }).then(function(popover) { popover.show(hostNode); }); 

Not really worse or better than the other answers. Just avoids using direct DOM or jQuery queries.

Here I want the popover to always align with the element using the .target-host-item-class .