how to use ngAnimate with custom modal ? about angular-modal-service

[alepee]

I finally did it without ngAnimate service.

ModalController

myApp.controller 'ModalConfirmController', ($scope, $timeout, $element, inputs, close) ->

  angular.extend $scope, inputs

  $scope.id ?= 'modal-default'
  $scope.backdrop ?= true
  $scope.display = true

  # remove class `modal-animate-enter` after modal render
  # (I am still looking for a way to do it with something like `Modal.open().then`)
  $timeout ->
    $element.removeClass 'modal-animate-enter'
  , 300

  $scope.close = (result) ->
    $element.addClass 'modal-animate-leave'
    $timeout ->
      $scope.display = false
      close result
    , 500

Template

.modal.modal-confirm.modal-animate-enter ng-show="display" ng-class="id"
  .modal-backdrop ng-if="backdrop" ng-click="close(false)"
  .modal-dialog
    .modal-image ng-if="imageUrl": img ng-src="imageUrl"
    .modal-title ng-if="title" ng-bind="title"
    .modal-content ng-bind-html="content"
    .modal-footer
      button ng-click="close(false)" ng-bind="cancel.text" ng-class="cancel.class"
      button ng-click="close(true)" ng-bind="confirm.text" ng-class="confirm.class"

Stylesheet

.modal
{
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    height: 100%;
    .modal-backdrop
    {
        position: absolute;

        width: 100%;
        height: 100%;

        transition: opacity 280ms linear;

        opacity: 1;
        background-color: rgba(0,0,0,0.3);
    }
    .modal-dialog
    {
        position: relative;
        top: 20%;

        width: 650px;
        max-width: 100%;
        margin: 0 auto;

        transition-duration: 500ms;
        transition-property: transform, opacity;
        transform: translateY(0);

        opacity: 1;
        border-radius: 10px;
        background-color: $white;
        box-shadow: 7px 13px 30px 0.00px rgba(75, 97, 109, 0.3);

        transform-style: preserve-3d;
    }
    &.modal-animate-enter
    {
        .modal-dialog
        {
            transition-timing-function: cubic-bezier(0.4, 0, 0, 1.5);
            transform: translateY(-200px);
        }
    }
    &.modal-animate-leave
    {
        .modal-dialog
        {
            transition-timing-function: cubic-bezier(1.5,0,0,0.4);
            transform: translateY(200px);
        }
    }
    &.modal-animate-enter,
    &.modal-animate-leave
    {
        .modal-dialog,
        .modal-backdrop
        {
            opacity: 0;
        }
    }
}

[dwmkerr]

Thanks for sharing your code, I'll leave this issue open for now so others can find it easily.

[LunarDevelopment]

It'd be nice to have a version of this code written in standard typing, I'm assuming this is typescript or coffee script or some extended syntax I'm not familiar with.. :<

[alepee]

@LunarDevelopment yes javascript is written in coffee, css in sass and html with slim.
Here is the javascript part, compiled by js2.coffee

ModalController

  myApp.controller('ModalConfirmController', function($scope, $timeout, $element, inputs, close) {
    angular.extend($scope, inputs);
    if ($scope.id == null) {
      $scope.id = 'modal-default';
    }
    if ($scope.backdrop == null) {
      $scope.backdrop = true;
    }
    $scope.display = true;
    $timeout(function() {
      return $element.removeClass('modal-animate-enter');
    }, 300);
    return $scope.close = function(result) {
      $element.addClass('modal-animate-leave');
      return $timeout(function() {
        $scope.display = false;
        return close(result);
      }, 500);
    };
  });

[dwmkerr]

#93 now holds context on this ongoing issue, please move conversations to that thread!