after: fullscreen mode using angularjs

by Evgenij Olshanskij

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div class="row" style="padding-top: 30px" ng-controller="appController">
    <div fullscreen-block ng-repeat="chart in data" class="col-md-4 col-sm-4">
        <div class="row">
            <div class="col-md-10">
                <canvas id="{{chart.name}}"></canvas>
            </div>
            <div ng-if="showLegend()" class="col-md-2">
                <div ng-repeat="dataset in chart.datasets" class="row">
                    <label>{{dataset.label}}</label>
                    <input type="checkbox" ng-model="dataset.show" ng-change="changeDataset(chart, dataset)" style="margin-left: 10px"/>
                </div>
            </div>
        </div>
    </div>
</div>

SCSS

.block {
  padding: 0 20px 0 20px;
  height: 100%;
  overflow: auto;
  margin: auto;
  border: solid 1px #A8A8A8;
}

.header {
  display: flex;
  align-items: center;
}

.form-item {
  margin-top: 10px;
}

div#tabs {
  height: 100% !important;
}

.form-container {
    padding: 0 100px 0 20px;
    height: 100%;
    overflow: auto;
    margin: auto;
}

.form-title {
    display: flex;
    align-items: center;
}

.form {
    width: 400px;
    margin-top: 20px;
}

.margin-top-10 {
    margin-top: 10px;
}

.expand {
    width: 100%;
}

JavaScript

'use strict';

// Declare app level module which depends on views, and components
var thisApp = angular.module('thisApp', []);

thisApp.directive('fullscreenBlock', ['$compile', function ($compile) {

		var jqLite = angular.element;

    var link = function (scope, element, attrs) {
        // Compiles DEFAULT icon button for opening the fullscreen mode.
        // fullscreenButton can be overridden by passing html code as a value of `fullscreen-block` attribute.
        var fullscreenButton = function () {
            return jqLite($compile(
                '<div class="row">' +
                    '<div class="col-md-10 col-sm-10 col-xs-10">' +
                        // Scope information
                        '<p>(scope id: <b>' + scope.$id + '</b>)</p>' +
                        '<p>(parent scope id: <b>' + scope.$parent.$id + '</b>)</p>' +
                    '</div>' +
                    '<div class="col-md-2 col-sm-2 col-xs-2">' +
                        '<span class="pull-right" name="fullscreen" ng-click="fullscreenMode($event)" tooltip="Expand" style="cursor: pointer"><i class="glyphicon glyphicon-fullscreen"></i></span>' +
                    '</div>' +
                '</div>'
            )(scope));
        };

        element.prepend((attrs.fullscreenBlock.length > 0) ? attrs.fullscreenBlock : fullscreenButton());
    };

		// Function helps to find the first parent element
    // which contains 'fullscreen-block' attribute.
    // This function can be replaced with JQuery's `closest()` method
    // if JQuery library is in use.
    var closest = function (element) {
        return (jqLite(element).parent().attr('fullscreen-block') !== undefined) ?
            jqLite(element).parent() :
            closest(jqLite(element).parent());
    };

    var controller = function ($scope) {
        // Handles click event
        $scope.fullscreenMode = function (event) {
            var modalWrapper = '<modal-wrapper></modal-wrapper>';
           ...