How to generate multiple modals in Angular 2 for the same view in Ionic?

Asked

Viewed 158 times

1

sorry ignorance may not have formulated the question correctly, a week ago I started to see a little about Ionic and Angular 2, I came doing some tests and came across the following problem.

<ion-view title="Teste modais" id="page10" style="background-color:#73F6A6;">
    <ion-content padding="true" class="has-header">
        </div>
        <table style=" border-collapse: collapse; width: 100%;">
            <tr>
                <td><strong>Nome 1</strong><br/>
                    <a ng-click="abrirModal()">
                        <img style=" border-radius: 50%;" src="testeimg.jpg" alt=""><br/>
                <a/>
                </td>

                <td><strong>Nome 2</strong><br/>
                    <a ng-click="abrirModal()">
                        <img style=" border-radius: 50%;" src="teste2img.jpg" alt=""><br/>
                <a/>
                </td>               
            </tr>
        </table>
   <script id="teste1.html" type="text/ng-template">
            <ion-modal-view>
                <ion-header-bar class="bar bar-header bar-positive">
                    <h1 class="title">Teste 1</h1>
              </ion-header-bar>
             <ion-content>
                     <h5 style="color:#000000;">Conteudo 1</h5>
                 </ion-content>
               </ion-modal-view>
    </script>
  <script id="teste2.html" type="text/ng-template">
            <ion-modal-view>
                <ion-header-bar class="bar bar-header bar-positive">
                    <h1 class="title">Teste 2</h1>
                </ion-header-bar>
                <ionic-content>
                  <h5 style="color:#000000;">Conteudo 2</h5>
                </ionic-content>  
               </ion-modal-view>
    </script>
    </ion-content>
</ion-view>

This is my template I wanted to test and your controller is:

.controller('meuModalTesteCtrl', ['$scope', '$stateParams', '$ionicModal', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function($scope, $stateParams, $ionicModal) {
    $scope.abrirModal = function() {
        $scope.openModal();
    }
    ///modal inicio
    $ionicModal.fromTemplateUrl('teste1.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function(modal) {
        $scope.modal = modal;
    });
    ///é o que mostra
    $ionicModal.fromTemplateUrl('teste2.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();
    };
    ///modal fim
} ])

What he really wanted was to click on the 1° table element to open a modal with an X content. And by clicking on the 2° element open a modal with Y content, and so on. But in practice it always opens what they have teste2.html [Note: In the controller always appears the modal below all]. As I said I am beginner so excuse the ignorance in not yet know how to do it in a simple way. Att

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.