angularjs - Angular/Ionic 中的可重用模态

Question

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

以下是创建模态框的方法(缩写为 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
    // ...
})

现在一切都很好，但如果我想从不同的 Controller 打开具有相同功能的相同模式，我将必须复制与其相关的所有代码。

我如何抽象它以使我的模态可从不同的 Controller 重用和调用？

理想情况下，我希望每个模式都有它自己的“ Controller ”(或类似的概念)，而不是必须将其所有代码放入任何想要打开它的 Controller 中。

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

        }
    };
}]);

和您的 Controller :

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

    $scope.externalScope = {}

});

每当您想将其包含在部分中时，只需添加:

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

该指令将可以通过 externalScope 属性访问 Controller ，反之亦然。您可以从 Controller 调用 $scope.externalScope.openModal()，它将触发您的指令模式打开。

希望这对您有所帮助。