fa-app and modal dialog

Hi,

I try to do a modal dialog by using css + famo.us-angular (I don't want to use boostrap ui and I like famo.us reactivity...). To do so I was trying the following architecture without success :

1) An HTML template with both the main window and the popup window fa-app class="full-screen" |-fa-surface | ||-fa-app modal-dialog style="width: 320px; height: 568px;" show='myData.modalShown' | |||-fa-header-footer-layout | ||||-fa-modifier | ||||-fa-modifier | ||||-fa-modifier |-fa-header-footer-layout ||-fa-modifier ||-fa-modifier ||-fa-modifier

By default, the fa-app modal-dialog is hidden. Each fa-modifier contains other fa tags.

2) Some CSS for main window and popup

3) A directive for modal-dialog (as restrict A ; replace false ; transclude false) with link function : -> Making the popup display animation in vanilla famo.us, and copying outerHTML in the resulting directive rendering

    var modal = new Surface({
        size:[500,500],
        properties:{
            backgroundColor:'white',
        }
      });
      modal.setContent(element[0].outerHTML);
      modal.addClass("ng-modal-dialog");
      modal.lightbox = new Lightbox({
        inTransform: Transform.translate(0,500,0),
        outTransform: Transform.translate(0,500,0),
        inTransition: {duration:1000, curve:Easing.outElastic},
        outTransition: {duration:200, curve:Easing.inOutQuad},
      });

And some code to manage display/hide popup

The popup animation to display it is ok, but there's no content inside. When shown, the chrome html console shows the following html :

nothing else... no trace of the fa-header-footer-layout subtemplate for the popup.

Any idea ?

Olivier

Famous / famous-angular

fa-app and modal dialog #189