IONICでモーダルサービスを作るには？

Question

すみません。私はIONICの初心者です、私はアプリでモーダルサービスを使用するつもりです。だから私はテンプレートのURLを変更することができます...？モーダルが表示されますが、私はcloseModal（）関数でモーダルを閉じることができません。 ここは私の工場です。コントローラで

.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(); 
     } 
    } 
}); 

：

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

何が悪いのでしょうか？私はモーダルビューを閉じるために何をしなければなりません... これは考えられる問題です。つまり、いくつかのモーダルビューの代わりにモーダルダイアログサービスを使用できます... ありがとうございます。 親切にしてください

Answer 1

私は今作業中のアプリでこれをたくさん行います。深く理解する必要があるいくつかの一般的な角度の概念があります。 1は$ qを使って約束し、もう1つはスコープの周りにあり、$ rootScopeを使って約束しています。私はあなた自身でその研究をさせたり、あなたが指を今やって燃やしていくのを覚えてみましょう。（muhahahahaha）以下のコードを見てください。

.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; 
    } 
}); 

は、HTMLは、この

<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>