Wie ionicPopover standardmäßig angezeigt wird

Question

So zeigen Sie standardmäßig ionicPopover an, klicken Sie nicht oder auf ein anderes Ereignis. Sobald die Seite oder die Ansicht geladen ist, zeigen Sie das 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

Sie waren sehr nah dran. Nach der offiziellen Dokumentation von IonicPopover, Die Syntax von popover.show() ist wie folgt:

show($event) where The $event or target element which the popover should align itself next to

Daher Code umschreiben als den Job tun folgt:

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

vollständige Beispiel, entlang mit Code ->here

Answer 2

Dies funktioniert ohne jQuery mit einschließen:

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

Answer 3

Ein exemple, das Ionic "utils" Klassen verwendet (hier 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); 
    }); 

Nicht wirklich besser oder schlechter als andere Antworten. Vermeiden Sie einfach direkte DOM-Abfragen oder jQuery.

Hier möchte ich das Popover immer mit dem Element mit der Klasse .target-host-item-class ausgerichtet werden.