Wie mache ich Modal Service in IONIC?

Question

Es tut mir leid. Ich bin Anfänger auf IONIC, ich werde einen modalen Dienst in einer App verwenden. also kann ich nur die Vorlagen-URL ändern ...? Das Modal wird angezeigt, aber ich kann das Modal nicht mit der Funktion closeModal() schließen. Hier ist meine Fabrik.

.factory('ModalSvc',function($ionicModal, $rootScope){ 
    return { 
     setModalView : function(url) { 
      $ionicModal.fromTemplateUrl(url, { 
       scope: $rootScope 
      }).then(function(modal) { 
       $rootScope.modal = modal; 
      }); 
     }, 
     openModal : function() { 
      $rootScope.modal.show(); 
     }, 
     closeModal : function() { 
      $rootScope.modal.hide(); 
     } 
    } 
}); 

In einem Controller:

ModalSvc.setModalView('templates/popup-search-order.html'); 
    $rootScope.openModel = function() { 
     ModalSvc.openModal(); 
    }; 
    $rootScope.hideModel = function() { 
     ModalSvc.closeModal(); 
    }; 

Was ist los? und was muss ich zum schließen der Modalansicht ... Das ist mögliches Problem. Das heißt, ich kann einen modalen Dialogdienst anstelle einer modalen Ansicht verwenden ...? Vielen Dank im Voraus. Mit freundlichen Grüßen

Answer 1

Ich mache das viel mit Apps, an denen ich gerade arbeite. Es gibt ein paar allgemeine Winkelkonzepte, die Sie gründlich verstehen müssen; 1 ist Promises mit $ q und der andere ist alle die Gotchas um Bereiche und mit $ rootScope. Ich werde dich diese Forschung selbst machen lassen oder lernen, wie du dir deine Finger hin und wieder verbrennst, während du sie benutzt (muhahahahaha). Siehe Code unten.

.factory('ModalSvc',function($ionicModal, $rootScope, $q){ 
return { 
    setModalView : setModalView 
} 
function setModalView(url) { 
     var def = $q.defer(); 
     var modalScope = $rootScope.$new(); 
     modalScope.cancelModal = cancelModal; 

     $ionicModal.fromTemplateUrl(url, { 
      scope: modalScope 
     }).then(function(modal) { 
      modalScope.modal = modal; 
      modalScope.modal.show(); 
     }); 

     function cancelModal() { 
      modalScope.modal.hide(); 
      modalScope.modal.remove(); 
      // you can resolve the result of the modal here 
      def.resolve(); 
     } 
     return def.promise; 
    } 
}); 

Sie html könnte dann folgendermaßen aussehen

<ion-modal-view> 
    <ion-header-bar class="bar-positive"> 
     <button class="button button-clear button-icon icon ion-close-round" ng-click="cancelModal()"></button> 
     <h1 class="title">Modal Title</h1> 

    </ion-header-bar> 
    <ion-content has-header="true"> 

    </ion-content> 
</ion-modal-view>