WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Javascript Popover


This is a view that will appear above the regular view.

Using Popover

A muffin will be created by victimization ion-popover-view part. This part ought to be intercalary to the HTML example and therefore the $ionicPopover service has to be injected into the controller.


There area unit 3 ways of adding muffin. the primary one is that the fromTemplate technique, that permits victimization the inline example. The second and therefore the third method of adding muffin is to use the fromTemplateUrl technique.

Controller Code for Fromtemplate Method

.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
   });
})
the second and also the third method of adding muffin is to use fromTemplateUrl methodology. The controller code are constant for each ways that except the fromTemplateUrl price. If the hypertext mark-up language is side to Associate in Nursing existing guide, the computer address are the muffin.html. If we would like to position the hypertext mark-up language into the templates folder, then the computer address can modification to templates/popover.html. Both examples have been explained below.

Controller Code for the fromTemplateUrl

.controller('MyCtrl', function($scope, $ionicPopover) { $ionicPopover.fromTemplateUrl('popover.html', { scope: $scope }).then(function(popover) { $scope.popover = popover; }); $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 }); }) Now, we are going to add the script with templet to the hypertext mark-up language file, that we have a tendency to square measure victimization for line of work the muffin perform.

HTML code from the Existing HTML file

<script id = "popover.html" type = "text/ng-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>
</script>
If we wish to form associate degree hypertext markup language as a separate file, we will produce a replacement hypertext markup language get into the templates folder and use a similar code as we have a tendency to employed in the preceding example while not the script tags.
The fresh created hypertext markup language file is as follows.
<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>
	
   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

The last thing we need is to create a button that will be clicked to show the popover.

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>




Welookups is optimized for learning.Copy right 2018 - 2019 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com