Angular: resize - Dynamic Parent 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>
    <button id="btnDestroy">click to destroy scope and de-register resize </button>
    <div class="row" id="parent-container">
      <div ng-repeat="item in data.ourprogrameTiersData" class="col-xs-12 col-sm-6 col-md-3" ng-attr-id="{{$index+'-ourprogrameTierParent'}}">
        <button ng-click="onParentClick(item, $index)">Button - {{$index}}</button>
      </div>
    </div>

    <div position-child-on-resize="activeParentSelector" parent-md-count="2" ng-if="childItems">
      <div class="child-container" style="clear:both ; width: 100%;height: 200px;background-color: #FBF7F7;border: 1px solid red;">
        <p style="background-color:yellow">Parent :{{activeParentSelector}}</p>
        <div ng-repeat="item in childItems">
          Click {{item.title}}
        </div>
      </div>
    </div>
  </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.
         * Usage  <div position-child-on-resize="activeParentSelector" parent-md-count="2">some dynamic content</div>
         * @ activeParentSelector - It is the scope object representing the item/potential sibling around which this directive will be * placed. It is in-fact CSS selector for id in the format of('#i-anysuffix')
         * 
         * @ parent-md-count - It contains the string representing the number of elements in one row in bootstrap tablet view
         */
        app.directive('positionChildOnResize', [function() {
          return {
            link: function(scope, element, attr) {
              var parentSelector; //should  be #id of parent
              var elPerRow = parseInt(attr.parentMdCount, 10);
              scope.$watch(attr.positionChildOnResize, function(value) {
                parentSelector = value;
                console.log('watch- ' + value);
                positionMe(true)
              });

              scope.$on('resizeWindow::resize', positionMe);
              /** var timer; tempted for time-out, but in normal use case it may not require
                    scope.$on('resizeWindow::resize',...