Многоразовый модальный в угловом/ионном

Question

В AngularJS с Ionic я хотел бы иметь возможность называть один модаль с разных контроллеров, не дублируя код, связанный с модальным.

Вот как создать модальный (сокращенно от http://learn.ionicframework.com/formulas/making-modals/).

HTML:

<div class="card" ng-controller='MainCtrl' ng-click="openModal()"> 
    Click here to open the modal 
</div> 

JS:

app.controller('MainCtrl', function($scope, $ionicModal) 
{ 
    $ionicModal.fromTemplateUrl('contact-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal 
    }) 

    $scope.openModal = function() { 
     $scope.modal.show() 
    } 

    // functions for this modal 
    // ... 
}) 

Теперь, когда все хорошо хорошо, но если я хочу, чтобы открыть тот же модальный с той же функциональностью от другого контроллера, я придется скопировать весь связанный с ним код.

Как я могу абстрагировать это, чтобы сделать мои модалы многоразовыми и вызываемыми из разных контроллеров?

В идеале я бы хотел, чтобы каждый модал имел свой собственный «контроллер» (или аналогичную концепцию), вместо того, чтобы вставлять весь свой код в контроллер того, что хочет его открыть.

Answer 1

Это идеальный сценарий для Директивы.

Директива Код:

app.directive('myPopUp', ['$ionicModal', function($ionicModal) { 

    return { 
     restrict: 'E', 
     scope: { 
      externalScope : "=" 
     } 
     replace: true, 
     templateUrl: 'path/to/your/template', 
     link: function($scope, $element, $attrs) { 

      $ionicModal.fromTemplateUrl('contact-modal.html', { 
       scope: $scope.externalScope, 
       animation: 'slide-in-up' 
      }).then(function(modal) { 
       $scope.modal = modal 
      }); 

      $scope.externalScope.openModal = function() { 
       $scope.modal.show() 
      }; 

     } 
    }; 
}]); 

И Ваш контроллер (ы):

app.controller('MainCtrl', ['$scope', function($scope) { 

    $scope.externalScope = {} 

}); 

Всякий раз, когда вы хотите, чтобы включить это в частичное только добавить:

<my-pop-up externalScope="externalScope"></my-pop-up> 

Эта директива будет имеют доступ к контроллеру и наоборот через атрибут externalScope. Вы можете позвонить $scope.externalScope.openModal() с вашего контроллера, и это вызовет открытие вашей директивной модальности.

Надеюсь, это было полезно.

Answer 2

Путь я сделать это служба

app.service('ModalService', function($ionicModal, $rootScope) { 


    var init = function(tpl, $scope) { 

    var promise; 
    $scope = $scope || $rootScope.$new(); 

    promise = $ionicModal.fromTemplateUrl(tpl, { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal; 
     return modal; 
    }); 

    $scope.openModal = function() { 
     $scope.modal.show(); 
    }; 
    $scope.closeModalService = function() { 
     $scope.modal.hide(); 
     //$scope.modal.remove(); 
    }; 
    $scope.$on('$destroy', function() { 
     //$scope.modal.remove(); 
    }); 

    return promise; 
    } 

    return { 
    init: init 
    } 

}) 

Как использовать его в контроллере

app.controller('editMyProfileCtrl', function($scope,ModalService) { 

    $scope.openModal = function() { 
    ModalService 
     .init('my-modal.html', $scope) 
     .then(function(modal) { 
      modal.show(); 
     }); 
    }; 
    $scope.closeModal = function() { 
    $scope.closeModalService(); 
    }; 

})