How do I create a directive in Angular that always places itself on the body?

Question

I'm facing an issue with my modal dialog component (in Angular 1.5). It's placed within a scrolling area, which means on iOS it gets cut off wherever it overflows the containers (Sidenote, this seems to be a major bug that no one is talking about! See here: Workaround for overflow restriction affecting fixed-positioned elements in iOS?)

In any case, I'd like to modify my modal-dialog directive to automatically move itself in the DOM, placing itself (once compiled) on the body tag, so that it won't be affected by the overflow rule.

This is my existing dialog. What's the best way of having it automatically place itself as a child of the body?

angular.module('app').directive('modalDialog', function()
{
   return { 
      restrict: "E",
      replace: true,
      transclude: true,
      template: "<div class='modal'><div class='modal-window'><div class='modal-inner' ng-transclude></div></div></div>",
      link: function (scope, element, attrs)
        {
        var zIndexDivInner = element.find("[ng-transclude='']").first().zIndex()

        //This handler exists solely for the purpose of keeping focus within the dialog.

        function onFocus(event)
        {
           if ($(event.target).zIndex() < zIndexDivInner) // If focus is going to an element
              {                                           // beneath the dialog,
              var $elmInputs = element.find(":input")     // set it back to the first input-type 
              $elmInputs[0].focus()                       // element within the dialog.
              }
        }

        //On scope destruction, remove the onFocus event listener.
   scope.$on('$destroy',
       function ()
      {
         $("body")[0].removeEventListener("focus", onFocus, true)
      })

   $("body")[0].addEventListener("focus", onFocus, true)
   }
 }
 });

score 0 · Accepted Answer · answered Apr 18 '16 at 16:23

angular.module('app').directive('rootIf', function()
{
   return { 
      restrict: 'A',
      link: function (scope, $elm, attrs)
         {
         scope.$watch(attrs.rootIf, onChangeRootIf);

         function onChangeRootIf()
            {
            if (scope.$eval(attrs.rootIf))
               $("body").children().first().before($elm);
            else
               $elm.detach();
            }
         }
      }
});

How do I create a directive in Angular that always places itself on the body?

1 Answers1