Ionic Best practices-using modal windows modal

Original address: Ionic Best practices-using modal windows modal

the structure of the modal window

In ionic, modal windows are provided via $ionicmodal. He is easy to use and very powerful, please refer to the $ionicmodal documentation for more information. Modal windows in ionic can be created using template strings or URLs. This article uses a URL.

When the modal window is created, it is bound to a scope that can be used to pass data. However, in more complex situations, accessing shared data through a service is the best practice.

making a modal window marker

Creating modal windows is straightforward. First, let's create our user interface. This small example will show a contact information, which is then allowed to be edited.

<Ion-header-barclass= "Bar-energized"> <H1class= "title">Contact Info</H1></Ion-header-bar><ion-content> <Divclass= "card"Ng-controller= ' Mainctrl 'Ng-click= "Openmodal ()">  <Divclass= "Item Item-divider">{{Contact.name}}</Div>  <Divclass= "Item Item-text-wrap">{{Contact.info}}</Div> </Div></ion-content> 

Now, there seems to be nothing special, the only one associated with a modal window is a scope function: Openmodal (). We also lack the modal part. Add it directly to the current tag.

<ScriptID= "contact-modal.html"type= "Text/ng-template">  <Div class="modal">    <Ion-Header-Bar>      <H1 class="title">Edit Contact</h1>    </ion-header-bar>    <Ion-content>      <Div class="List">        <Label class="Item Item-input">          <span class="Input-label">Name</span>          <input type="text"ng-Model="Contact.name">        </label>        <Label class="Item Item-input">          <span class="Input-label">Info</span>          <input type="text"ng-Model="Contact.info">        </label>      </div>      <Button Class="button Button-full button-energized"ng-Click="Closemodal ()"> Done</button>    </ion-content>  </div></Script>

In a production environment, you might want to put template tags in separate files or add them to the template cache. As with other parts of ionic that use templates, angular will first search for the required files from the template cache.

Display modal window

The controller code of the modal window is very simple. Ensure that the dependency $ionicmodal is injected into the controller.

App.controller (' Mainctrl ',function($scope, $ionicModal) {$scope. contact={name:' Mittens Cat ', Info:' Tap anywhere on the card to open the modal '} $ionicModal. Fromtemplateurl (' Contact-modal.html ', {scope: $scope, Animation:' Slide-in-up '}). Then (function(modal) {$scope. Modal=modal}) $scope. Openmodal=function() {$scope. Modal.show ()} $scope. Closemodal=function() {$scope. Modal.hide ();  }; $scope. $on (' $destroy ',function() {$scope. Modal.remove (); });}) 

The modal window of the Ionic uses an asynchronous deferred. This allows you to access the template cache and build modal windows asynchronously. We can provide a scope object for the modal window, otherwise he will use $rootscope. You can specify an over-animation effect for the open action of a modal window. More over-effects are described in the official documentation.

Once the modal window is built, the asynchronous completion function allows us to set a $scope.modal variable. Modal windows have some functions. In this example, we care about the show, hide, and remove functions. The Remove function is particularly important. By listening to the $destroy event of the scope object, we can ensure that the modal window object is garbage collected. Ignoring it will cause a memory leak in your program.

Review

Modal window is a very powerful user interface component, it is easy to show and utilize it through ionic.

Ionic Best Practices-using modal windows modal