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}}
        </div>
        <div class="panel-body">
            {{getCustomerInfo()}}
        </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

var myApp = angular.module('myApp',[]);

function mainController($scope) {
    $scope.getCustomerInfo = function(info) {
    	return 'Telephone number: ' + info;
    }
    $scope.getSpecialInformation = function(info) {
        return 'this is special information';
    }
}

myApp.directive('mainCustomerPanel', function () {
    return {
        restrict: 'EAC',
        templateUrl: 'mainCustomerPanelTemplate',
        scope: {
            fullName: "@",
            getCustomerInfo: "&"
        },
        link: function (scope, element, attrs) {
        }
    };
});