Custom Directive

http://angularjs.org/

by Edward Tanguay

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/ng-template" id="mainCustomerPanelTemplate">
    <div class="panel panel-success">
        <div class="panel-heading">
            Customer: {{fullName}} ({{APP_CONSTANTS.MESSAGE1}})
        </div>
        <div class="panel-body">
            {{getCustomerInfo()}}  ({{APP_CONSTANTS.MESSAGE2}}) 
        </div>
    </div>  
</script>

<div ng-controller="mainController">
    <main-customer-panel full-name="Jim Thompson" get-customer-info="getCustomerInfo('123')"></main-customer-panel>
    <main-customer-panel full-name="Joe Jackson" get-customer-info="getSpecialInformation()"></main-customer-panel>
</div>

CSS

body {
    padding: 20px;   
}

JavaScript

'use strict';
angular.module('myApp',[])
.constant('APP_CONSTANTS',
          {'MESSAGE1':'the first message',
           'MESSAGE2':'the second message'})
.controller('mainController', function ($scope) {
    $scope.getCustomerInfo = function(info) {
    	return '77765432Telephone number: ' + info;
    }
    $scope.getSpecialInformation = function(info) {
        return 'this is special information';
    }
})
.directive('mainCustomerPanel', 
    ['APP_CONSTANTS', function (APP_CONSTANTS) {
    return {
        restrict: 'EAC',
        templateUrl: 'mainCustomerPanelTemplate',
        scope: {
            fullName: "@",
            getCustomerInfo: "&"
        },
        link: function (scope, element, attrs) {
            scope.APP_CONSTANTS = APP_CONSTANTS;
        }
    };
}]);