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 src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
        <div class="panel-heading">(INCLUDED BUT NO COLOR) {{item.firstName}} {{item.lastName}} </div>
</script>

<script type="text/ng-template" id="itemMenuTemplateUndefined">
    <div class = "panel panel-default" > 
        <div ng-include="'itemMenuTemplatePanelHeading'"></div>
        <div class="panel-body">
            <div>Age: {{item.age}}</div>
        </div > 
    </div>
</script>

<script type="text/ng-template" id="itemMenuTemplateInternal">
    <div class = "panel panel-success" > 
        <div class = "panel-heading" > {{item.firstName}} {{item.lastName}} </div>
        <div class="panel-body">
            <div>Age: {{item.age}}</div > 
            <div > Internal Code: {{item.internalcode}} </div>
        </div > 
    </div>
</script>

<script type="text/ng-template" id="itemMenuTemplateExternal">
    <div class = "panel panel-warning" > 
        <div class = "panel-heading" > {{item.firstName}} {{item.lastName}} </div>
        <div class="panel-body">
            <div>Age: {{item.age}}</div > 
            <div> Website: {{item.website}}</div>
        </div > 
    </div>
</script>

<div ng-controller="mainController">
    <div ng-repeat="customer in customers">
        <div item-menu item="customer" add="addCustomer()"></div>
    </div>
</div>

CSS

body {
    padding: 20px;
}

JavaScript

'use strict';
angular.module('myApp', [])
    .controller('mainController', function ($scope) {
    $scope.customers = [{
        'kind': 'internal',
            'firstName': 'Jim',
            'lastName': 'Thompson',
            'age': '34',
            'internalcode': 'X3434'
    }, {
        'kind': 'external',
            'firstName': 'James',
            'lastName': 'Hankerton',
            'age': '33',
            'website': 'http://google.com'
    }, {
        'kind': 'undefined',
            'firstName': 'Greg',
            'lastName': 'Garland',
            'age': '28'
    }, {
        'kind': 'external',
            'firstName': 'Eddie',
            'lastName': 'Eddington',
            'age': '33',
            'website': 'http://yahoo.com'
    }, {
        'kind': 'internal',
            'firstName': 'Rachael',
            'lastName': 'Rosters',
            'age': '34',
            'internalcode': 'X1112'
    }, {
        'kind': 'undefined',
            'firstName': 'David',
            'lastName': 'Dielan',
            'age': '37'
    }, {
        'kind': 'undefined',
            'firstName': 'Howard',
            'lastName': 'Honduras',
            'age': '45'
    }];
    $scope.numberAdded = 0;
    $scope.addCustomer = function () {
        $scope.numberAdded++;
    }
})
    .directive('itemMenu', function () {

    var controller = function ($scope) {
        var vm = this;
        function init() {
            
        }
        init();
        vm.addItem = function () {
            $scope.add();
            vm.items.push({
                'kind': 'undefined',
                    'firstName': 'Joe',
                    'lastName': 'Newton',
                    'age': Math.floor(Math.random() * 60) + 20
            });
        }
    };

    return {
        restrict: 'A',
        scope: {
            item: '=',
            add: '&'
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
       ...