Question

我正在尝试创建一个Ionic Modal指令，这样对于app中的每个模态，我都不需要加载模板并在控制器中指定close，open函数。我首先创建了以下服务

function ModalService($ionicModal) {

    this.initialize=function($scope,parent) {
        parent.modal = Array();

        angular.forEach( parent.modals , function(k){
            $ionicModal.fromTemplateUrl('templates/'+k+'.html',function(modal)
                {
                    parent.modal[k]=modal;

                },
                {
                    scope:$scope,
                    animation:'slide-in-up'
                });
        });

        // Execute action on hide modal
        $scope.$on('modal.hidden', function () {
            // Execute action
        });
        // Execute action on remove modal
        $scope.$on('modal.removed', function () {
            // Execute action
        });

    };

    this.open=function(parent,k) {
        parent.modal[k].show();
    }

    this.close=function(parent,k) {
        parent.modal[k].hide();
    }
}

所以，在控制器中加载我写的模板，

this.modals = ['add-item','edit-item'];

ModalService.initialize($scope,this);

但是，如果范围具有值，则相同的模板可能会填充输入字段。因此，我创建了指令 customModal 指令来指定这样，

<label custome-modal modal-name="add-item" for="" class="item item-input item-floating-label min-height-65" >

并定义了指令

function modalIngredients($ionicModal) {
    return {
        restrict:'A',
        scope:{
            modalName:'='
        },
        controller:function($scope) {
            $scope.closeCustomModal = function() {
                $scope.modal.hide();
            }
        },
        link:function(scope,elem,attr) {
            $ionicModal.fromTemplateUrl('templates/'+attr.modalName+'.html', {
                scope: scope.externalScope,
                animation: 'slide-in-up'
            }).then(function(modal) {
                scope.modal = modal
            });

            elem.bind('click',function() {
               scope.modal.show();
            });
        }
    }
}

问题是，一旦模板加载，并且Modal显示，我就无法访问模态中的控制器。我想要在指令的控制器中指定的模态逻辑，并根据范围值进行操作。怎么做？

定制ionicModal指令

0 个答案: