Açısal olarak her zaman kendini vücut üzerinde tutan bir direktif nasıl oluştururum?

Question

Kalıcı iletişim bileşeni ile ilgili bir sorunla karşı karşıyayım (Açısal 1.5). Bir kaydırma alanı içine yerleştirilir, yani iOS'un kaplara taşması durumunda kesilir (Sidenote, kimsenin bahsetmediği önemli bir hata gibi görünüyor! Bakın: Workaround for overflow restriction affecting fixed-positioned elements in iOS?)

Her durumda, Modal-dialog yönergesini DOM'de kendiliğinden hareket ettirmek, gövde etiketinde kendisini (derlendikten sonra) yerleştirmek için, taşma kuralından etkilenmeyecek şekilde değiştirmek istiyorum.

Bu benim mevcut iletişimim. Kendini vücudun bir çocuğu olarak otomatik olarak yerleştirmenin en iyi yolu nedir?

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) 
    } 
} 
}); 

Answer 1

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(); 
      } 
     } 
     } 
});