Отображение всплывающих окон с угловым ng-кликом по выбранному элементу

Question

Я пытаюсь выяснить, как показать скрытый элемент, расположенный по отношению к ссылке, которая была нажата, чтобы вызвать ее.

Я знаю, как использовать ng-click и ng-show, но я не могу понять, как позиционировать «показанный» элемент по отношению к элементу «clicked».

Мысли?

-Yellowradio

Answer 1

Есть много различных способов, вы можете сделать это в зависимости от сложности, что вы пытаетесь всплывающее окно. Вы можете легко создать директиву, которая обрабатывает все, включая подключение события click к элементу, генерирование html для всплывающего содержимого и последующее отображение его в правильной позиции. Код для всего примера немного времени, чтобы разместить здесь, но здесь есть директива:

angular.module("myModule", []).directive("popupLauncher", function($rootScope, $compile) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var popup = "<div class='popup'>" + attrs['popupLauncher'] + "</div>"; 
     element.click(function() { 
      var popups = $(".popup"); 
      if (popups.length > 0) { 
       //if it exists remove it (this allows for only one popup at a time on the screen) 
       popups.remove(); 
      } else { 
       //if it doesn't add it 
       var compiledElement = $compile(popup)($rootScope.$new()); 
       $('body').append(compiledElement); 
       //figure out the coordinates of where you want the popup 
       var topOfTrigger = element.offset().top; 
       var leftOfTrigger = element.offset().left; 
       var rightOfTrigger = leftOfTrigger + parseInt(element.css("width")); //don't use width() as it doesn't include margins and padding 
       var bottomOfTrigger = topOfTrigger + parseInt(element.css("height")) 
       //this will position it at the bottom right of the clicked element but 
       //using the variables above you can change that 
       $(compiledElement).css("top", bottomOfTrigger) 
        .css("left", rightOfTrigger); 

       //you may want to hook up a resize listener on the body to reposition if the 
       //popup is visible when the page resizes 
       //also, you may want a click event on the body to close it when you click off 
       //right now this requires that you click on the trigger again 

      } 
     }); 
    } 
} 
}); 

А вот важный CSS:

.popup { 

    position:absolute; 
    background-color:#FFFFFF; 
    border:1px solid #000000; 
    padding:10px; 
} 

А вот как его использовать:

<button popup-launcher="this is the popup content">popup</button> 

увидеть эту скрипку для рабочей директивы и образца CSS для укладки всплывающего окна: http://jsfiddle.net/mcgraphix/s8506hm8/

Используется JQuery, но вы можете легко манипулировать и позиционировать DOM самостоятельно.