Dynamic Position Directive

http://angularjs.org/

by Amitesh Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js&quot;"></script>
<div ng-controller="MyCtrl" class="container-fluid">
  <div resize-window>
  hjkljkljlkj<div id="xyz" style="display:inline-block;">Hey Button! left with me</div><br>
  hjkljkljlkj<div id="xyz2" style="display:inline-block;">Hey Button! right with me</div>
  </div>
  <div> <button sync-position1="#xyz">Button 1</button></div>
  <div> <button sync-position="#xyz2" sync-position-dir="right" >Button 2</button></div>
</div>

JavaScript

var app = angular.module('app', []);
        app.directive('resizeWindow', [function() {
            return {
                link: function(scope) {
                    $(window).on('resize', onResize);
                    scope.$on("$destroy", function() {
                        console.log('deregistering the window resize event added by resizeWindow directive');
                        $(window).off('resize', onResize);
                    });

                    function onResize(e) {
                        console.log('broadcasting the event --- resizeWindow::resize');
                        scope.$broadcast('resizeWindow::resize');
                    }
                }
            };
        }]);
        /** It will change the parent of element based on screen width. It listens resizeWindow::resize angular event as a indication of window resize.
         */
        app.directive('syncPosition', [function() {
            return {
                link: function(scope, element, attr) {
                    var $syncWithElement = $(attr.syncPosition),
                        syncPositionDir = attr.syncPositionDir || 'left';
                    scope.$on('resizeWindow::resize', positionMe);
                    positionMe(); //setup initially
                    function positionMe() {
                        if (!$syncWithElement.length) {
                            console.log(attr.syncPosition + 'refrence element not found!!');
                            return;
                        }
                        var positionValue = getOffsetPosition($syncWithElement, syncPositionDir );
                        var css = {"position": "absolute"};
                        css[syncPositionDir] = positionValue;
                        $(element).css(css);
                    }
                    
                    function getOffsetPosition($el, offsetFrom){
                      var leftOffset = $el.offset().left; 
                    	if(offsetFrom ===...