Angular / Ionic中的可重用模态答案

【问题标题】：Reusable modal in Angular / IonicAngular / Ionic中的可重用模态
【发布时间】：2015-01-02 12:39:31
【问题描述】：

在带有 Ionic 的 AngularJS 中，我希望能够从不同的控制器调用一个模态，而不必复制与模态相关的代码。

这里是创建模态的方法（缩写为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
    // ...
})

现在这一切都很好，但是如果我想从不同的控制器打开相同的模态 具有相同的功能，我将不得不复制与其相关的所有代码。

如何将其抽象化以使我的模态可重用并可从不同的控制器调用？

理想情况下，我希望每个模态都有自己的“控制器”（或类似概念），而不是将其所有代码放入任何想要打开它的控制器中。

【问题讨论】：

标签： angularjs modal-dialog ionic-framework

【解决方案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()，它会触发你的指令模式打开。

希望这对您有所帮助。

【讨论】：

TypeError：无法在$scope.externalScope.openModal 设置未定义的属性“openModal”。另外，我认为在replace 之前需要有一个,？
是的，你对逗号是正确的。关于未定义的设置属性，您是否在控制器中创建了空对象？那个控制器是主持你的指令所在的 DOM 区域的那个控制器吗？

【解决方案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();
  };

})

【讨论】：

一个问题，为什么要返回{init: init}。请解释一下。