Angular get event on modal creation

0
votes

Simple question,

I'm using Angular UI to show modals.

I have an application that opens multiple modals,

the modals has issue with the screen height and i added a code that optimize the modal size to the height of the screen.

The thing is i want to be notified when there is a new modal created so i can call my function for fixing the modal size.

Any ideas how i get notified for modal creation?

Thanks,

Examples of modal cration:

// create the modal instance and show the popup
var modalInstance = $modal.open({
    templateUrl: 'partials\mymodal.html',
    windowClass: "modal fade in app-modal-window",
    controller: controllertest,
    resolve:{
        resultData:function(){ return null;}
    },
    backdrop: 'static',

    dialogFade: true,
    keyboard: false,
    fade:true,
    size:'lg'
});

// destroy the modal instance on cancel
var unbind_modal_popup = $scope.$on('$destroy', function ()
{
    if (modalInstance != undefined)
    {
        modalInstance.dismiss('cancel');
    }
});

// return handler.
modalInstance.result.then(function (data) {


    // set the country field
    unbind_modal_popup();
}, function () {
    unbind_modal_popup();
})
};

Example of Modal HTML:

<div tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in small-modal" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" window-class="modal fade in small-modal" size="sm" index="0" animate="animate">
    <div class="modal-dialog modal-sm" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude=""><div id="parameter-modal" class="ng-scope">
        <p>Text inside modal</p>
</div></div></div>
</div>
3
angularjsangular-ui

3 Answers

0
votes

You can do have a scope property that holds a count of your modals, and watch that.

// set up a watcher:
$scope.$watch('modalCount', function (newVal, oldVal) {
  if (newVal > oldVal) {
    // your login upon modal creation here
  }
});

// create the modal instance and show the popup
var modalInstance = function () {

  // call some service or change some scopeProperty that you watch e.g.
  $scope.modalCount++;
  // OR
  someService.modalCreated();

  return $modal.open({
    templateUrl: 'partials\mymodal.html',
    windowClass: "modal fade in app-modal-window",
    controller: controllertest,
    resolve:{
        resultData:function(){ return null;}
    },
    backdrop: 'static',

    dialogFade: true,
    keyboard: false,
    fade:true,
    size:'lg'
  })();
};

You can also add that logic into the modal's controller, but then you need to add to an object property or just call some service (as in the second example).

0
votes

The $modal.open method has a "opened" promise that gets resolved once the modal has been opened.

Something like this should work:

$modal.open().opened.then(function(){
  //Modal opened successfully.
});

Reference: https://angular-ui.github.io/bootstrap/

0
votes

Eventually i used css instead of code:

@media (max-height: 800px) {

  .modal {
    max-height:500px;
    overflow:auto;
  }
}

@media (max-height: 700px) {

  .modal {
    max-height:450px;
    overflow:auto;
  }
}

@media (max-height: 600px) {

  .modal {
    max-height:400px;
    overflow:auto;
  }
}

@media (max-height: 500px) {

  .modal {
    max-height:350px;
    overflow:auto;
  }
}