Angular - Module

Module with controller, filter, and directive.

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="msg" />
    <p my-dctv >
        {{msg | UC }}
    </p>
    <hr>
    <ct-Paneltool></ct-Paneltool>
    <hr>
    <div class="col-sm-6">
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h4 class="panel-title">Mixed Colors</h4>
							<ct-paneltool class="panel-tools" tool-refresh="load1"><a href="#" class="btn btn-transparent btn-sm" panel-refresh="" tooltip-placement="top" uib-tooltip="Refresh" data-spinner="load1"><i class="fa fa-refresh"></i></a></ct-paneltool>
						</div>
						<div class="panel-body no-padding partition-dark-primary">
							<div class="col-md-12 partition-light-primary no-padding">
								<div class="padding-15">
									<p>
										Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
									</p>
								</div>
							</div>
							<div class="col-md-12 no-padding">
								<div class="padding-15">
									<p>
										Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
        <hr>
        <div class="col-sm-6">
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h4...

CSS

.padding-15 {
  padding: 15px !important;
}

.panel-tools {
  position: absolute;
  right: 10px;
  top: 14px;
  font-size: 12px;
}

.panel-dark-primary, .partition-dark-primary {
  background-color: #0062cc;
  position: relative;
  color: #ffffff;
}
.panel-dark-primary .panel-heading, .partition-dark-primary .panel-heading {
  background-color: #0062cc;
  border: none;
}
.panel-dark-primary .panel-tools .btn, .panel-dark-primary .panel-tools > a, .partition-dark-primary .panel-tools .btn, .partition-dark-primary .panel-tools > a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.panel-dark-primary .panel-tools .btn:hover, .panel-dark-primary .panel-tools > a:hover, .partition-dark-primary .panel-tools .btn:hover, .partition-dark-primary .panel-tools > a:hover {
  color: #ffffff !important;
}
.panel-primary, .partition-primary {
  background-color: #007AFF;
  position: relative;
  color: #ffffff;
}
.panel-primary .panel-heading, .partition-primary .panel-heading {
  background-color: #007AFF;
  border: none;
}
.panel-primary .panel-tools .btn, .panel-primary .panel-tools > a, .partition-primary .panel-tools .btn, .partition-primary .panel-tools > a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.panel-primary .panel-tools .btn:hover, .panel-primary .panel-tools > a:hover, .partition-primary .panel-tools .btn:hover, .partition-primary .panel-tools > a:hover {
  color: #ffffff !important;
}

.panel-light-primary, .partition-light-primary {
  background-color: #3395ff;
  position: relative;
  color: #ffffff;
}
.panel-light-primary .panel-heading, .partition-light-primary .panel-heading {
  background-color: #3395ff;
  border: none;
}
.panel-light-primary .panel-tools .btn, .panel-light-primary .panel-tools > a, .partition-light-primary .panel-tools .btn, .partition-light-primary .panel-tools > a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.panel-light-primary .panel-tools .btn:hover, .panel-light-primary .panel-tools > a:hover, .partition-light-primary...

JavaScript

// the main (app) module
var app = angular.module("myApp", []);

// add a controller
app.controller("myCtrl", function($scope) {
    $scope.msg = "hello world";
});

// add a filter
app.filter("UC", function() {
    return function(input) {
        return input.toUpperCase();
    }
});

// add a directive
app.directive("myDctv", function() {
    return function(scope, element, attrs) {
        element.bind("mouseenter", function() {
            element.css("background", "yellow");
        });            
        element.bind("mouseleave", function() {
            element.css("background", "none");
        });            
    }
});

app.directive('ctPaneltool', function () {
    var templates = {
        /* jshint multistr: true */
        collapse: "<a href='#' class='btn btn-transparent btn-sm' panel-collapse='' tooltip-placement='top' uib-tooltip='Collapse' ng-click='{{panelId}} = !{{panelId}}' ng-init='{{panelId}}=false'>" + "<i ng-if='{{panelId}}' class='ti-plus'></i>" + "<i ng-if='!{{panelId}}' class='ti-minus'></i>" + "</a>",
        dismiss: "<a href='#' class='btn btn-transparent btn-sm' panel-dismiss='' tooltip-placement='top' uib-tooltip='Close'>" + "<i class='fa fa-close'></i>" + "</a>",
        refresh: "<a href='#' class='btn btn-transparent btn-sm' panel-refresh='' tooltip-placement='top' uib-tooltip='Refresh' data-spinner='{{spinner}}'>" + "<i class='ti-reload'></i>" + "</a>"
    };

    return {
        restrict: 'E',
        template: function (elem, attrs) {
            var temp = '';
            if (attrs.toolCollapse)
                temp += templates.collapse.replace(/{{panelId}}/g, (elem.parent().parent().attr('id')));
            if (attrs.toolDismiss)
                temp += templates.dismiss;
            if (attrs.toolRefresh)
                temp += templates.refresh.replace(/{{spinner}}/g, attrs.toolRefresh);
            return temp;
        }
    };
});
app.directive('panelDismiss', function () {
    'use strict';
    return {
       ...