QtWidget

<!DOCTYPE html>
<html ng-app="main">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <link rel="stylesheet" href="qt-widget.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />

    
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <qt-widget><h1>Widget 1</h1></qt-widget>
    <qt-widget><h1>Widget 1</h1></qt-widget>
    <qt-widget><h1>Widget 1</h1></qt-widget>
    

    <script src="app.js"></script>
    <script src="qtWidget.min.js"></script>
  </body>

</html>

(function () {

  'use strict';


  function qtWidget() {
    // Usage:
    //     <qt-widget></qt-widget>
    // Creates:
    // 


    return {
      restrict: 'E',
      transclude: true,
      link: link,
      templateUrl: 'qtWidget.html',
      //controller: QtWidgetController,
      //controllerAs: 'wd',
      scope: {

        //settings baed on attribute
        title: '@'

      }
    };

    function link(scope, element, attrs) {
      
      scope.toggleFullScreen = toggleFullScreen;
      scope.isFullScreen = false;
      
      function toggleFullScreen() {
        scope.isFullScreen = !scope.isFullScreen;

        if (scope.isFullScreen)
          angular.element('html').css('overflow-y', 'hidden');
        else
          angular.element('html').css('overflow-y', 'scroll');
      }

    }
    
  }

  angular
      .module('QtWidget')
      .directive('qtWidget', qtWidget);

  //qtWidget.$inject = [];

})();

.widget {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-width: 1px 1px 2px;
  background: #fff;
  border-radius: 4px 4px 0 0;
}
.widget__fullscreen_mode {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #fff;
}
.widget-header {
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 34px;
  color: #333;
  border-bottom: 2px solid #ccc;
  background-color: #eee;
  background: -moz-linear-gradient(top, #e6e6e6 0%, #d9d9d9 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e6e6e6), color-stop(100%, #d9d9d9));
  background: -webkit-linear-gradient(top, #e6e6e6 0%, #d9d9d9 100%);
  background: -o-linear-gradient(top, #e6e6e6 0%, #d9d9d9 100%);
  background: -ms-linear-gradient(top, #e6e6e6 0%, #d9d9d9 100%);
  background: linear-gradient(to bottom, #e6e6e6 0%, #d9d9d9 100%);
}
.widget-header-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 34px;
  float: left;
  margin-left: 10px;
  letter-spacing: 0;
}
.widget-header-actions {
  float: right;
}
.widget-button {
  min-width: 30px;
  height: 32px;
  float: left;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.09);
  background: transparent;
  color: #666;
  border-top-right-radius: 4px;
}
.widget-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #111;
}
.widget-button:active {
  box-shadow: inset rgba(0, 0, 0, 0.2) 0 3px 6px;
}
.widget-content {
  position: relative;
}
.widget-footer {
  height: 30px;
  padding: 20px 14px;
  background: #eee;
  border-top: 1px solid #ddd;
}
.widget-footer:after {
  content: "";
  clear: both;
  display: table;
}

<div class="widget" ng-class="{'widget__fullscreen_mode' : isFullScreen}">
  <header class="widget-header">
    <div class="widget-header-title">
      {{ title }}
    </div>

    <div class="widget-header-actions">
      <button ng-click="toggleFullScreen()" class="widget-button">
        <i class="widget-icon_button  fa fa-expand"></i>
      </button>
    </div>
  </header>

  <section class="widget-content">
    <div class="widget-content-body">
      <div ng-transclude></div>
    </div>
  </section>
</div>

angular.module('main', ['QtWidget']);

angular.module('QtWidget', []);

//by grunt-contrib-uglify
//!function(){"use strict";function a(){function a(a){a.isFullScreen=!1,a.toggleFullScreen=function(){a.isFullScreen=!a.isFullScreen,a.isFullScreen?angular.element("html").css("overflow-y","hidden"):angular.element("html").css("overflow-y","scroll")}}return{restrict:"E",transclude:!0,link:a,templateUrl:"qtWidget.html",scope:{title:"@"}}}angular.module("QtWidget").directive("qtWidget",a)}(),function(){"use strict";function a(){function a(a){a.isFullScreen=!1,a.toggleFullScreen=function(){a.isFullScreen=!a.isFullScreen,a.isFullScreen?angular.element("html").css("overflow-y","hidden"):angular.element("html").css("overflow-y","scroll")}}return{restrict:"E",transclude:!0,link:a,templateUrl:"/Assets/js/app/directives/qtWidget/qtWidget.html",scope:{title:"@"}}}angular.module("QtWidget").directive("qtWidget",a)}();

//by http://marijnhaverbeke.nl/uglifyjs
!function(){"use strict";function a(){function a(a){a.isFullScreen=!1,a.toggleFullScreen=function(){a.isFullScreen=!a.isFullScreen,a.isFullScreen?angular.element("html").css("overflow-y","hidden"):angular.element("html").css("overflow-y","scroll")}}return{restrict:"E",transclude:!0,link:a,templateUrl:"qtWidget.html",scope:{title:"@"}}}angular.module("QtWidget").directive("qtWidget",a)}();