Dropdown is container that are hidden by default and should be called by other element to become visible. When it's visible, it attached to element that called it.

<input type="button" su-target="identifier" value="Open dropdown" />
<input type="button" su-target="identifier" value="Open same dropdown" />
 
<su-dropdown su-anchor="identifier">
    This is dropdown dd1
    ...
</su-dropdown>

Some facts about layered elements:

• Layered elements (dropdowns and popups) could be nested
• Open nested layered elements makes tree
• Second click on element that opening layer closes it
• Any click outside top opened layer (or press on ESC button) will close it
• Element that opening layer by click is caller
• Caller is any element that have su-target attribute
• Any layered element should have an attribute su-anchor, that tells to caller what to open
• Different callers can open the same layered elements, but only if they are not nested by loop

Some more about dropdowns:

• If dropdown callers width is less then 50 pixels, dropdowns arrow will be closer to edge
  Rly??

Popup is container that are hidden by default and should be called by other element too. When it's visible, it makes basic content area unscrollable and greyscaled. Wherein popup's container is displayed at the center of the page.

<input type="button" su-target="identifier" value="Open popup" />
 
<su-popup su-anchor="identifier"
          su-config='{"title": "Popup title"}'>
    Popup content
</su-popup>

su-config is an optional attribute that must be a JSON-object which handles following parameters:

<input type="button" su-target="identifier" value="Open popup" />
 
<su-popup su-anchor="identifier"
          su-config='{
              "title": "Popup with menu",
              "menu": [
                  {
                      "type": "hilite",
                      "title": "Menu item #1",
                      "target": "section-1"
                  },
                  {
                      "type": "divider",
                      "title": "This is divider and it is a multiline menu item"
                  },
                  {
                      "title": "Menu item #2",
                      "target": "section-2"
                  },
                  {
                      "title": "Menu item #3",
                      "target": "section-3"
                  }
              ]
          }'>
    <su-section su-anchor="section-1">
        ...
    </su-section>
    <su-section su-anchor="section-2">
        ...
    </su-section>
    <su-section su-anchor="section-3">
        ...
    </su-section>
</su-popup>

Possibly you would like to access some data when opening dropdown or popup element to generate its content. In this case it would be nice to display an animated spinner while loading.

Every layered element have a loading variable that could be set with any funciton in your controller. When it is true, there will displayed spinner instead of element's content.

So, prepare a function in scope of current view/page, and pass its name in su-open attribute of layered element. There's also another function name could be passed with su-close, so this funciton will be called when layered element became out of focus.

You can use su-open and su-close with su-dropdown, su-popup and su-section.

Lets see it in action:

<script>
    angular.module("app", []).controller("MainController", function($scope, $timeout) {
        $scope.onOpen = function() {
            $scope.loading = true;
 
            $scope.timeout = $timeout(function() {
                $scope.loading = false;
            }, 1000);
        }
 
        $scope.onClose = function() {
            $timeout.cancel($scope.timeout);
            $scope.loading = false;
        }
    });
</script>
 
<div ng-controller="MainController">
    <input type="button" su-target="identifier" value="Open popup" />
 
    <su-dropdown su-anchor="identifier"
                 su-open="onOpen"
                 su-close="onClose">
        Dropdown content
    </su-dropdown>
</div>