AngularJS Directive

This example shows how to use AngularJS directives to improve code reusability.

by bruscopelliti

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
    
    <head>
        <meta charset="utf-8" />
        <title>My AngularJS App</title>
    </head>
    
    <body ng-controller="stageController">
        <div id="main">
            <div id="header">
                 <h1>{{title}}</h1>

                <shopping-cart></shopping-cart>
            </div>
            <div id="items">
                <div class="item" ng-repeat="i in items">
                    <div item-card item-title="{{i.title}}" item-src="{{i.src}}" item-price="{{i.price}}"></div>
                </div>
            </div>
            <hr/>
            <div id="footer">
                <shopping-cart></shopping-cart>
            </div>
        </div>
    </body>

</html>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style> body {
    background:White;
}
.ng-invalid {
    border: 1px solid red;
}
#main {
    cursor:default;
    margin:0 auto 100px;
    padding:10px 25px;
    width:580px;
}
#main h1 {
    font-size:24px;
    padding-left:10px;
}
#main .sCart {
    float:right;
    padding-right:25px;
}
.sCart .quantity {
    font-size:32px;
    vertical-align:8px;
}
#items {
    clear:both;
}
#main .item {
    border:1px solid #999999;
    display:inline-block;
    margin:0 8px 15px;
    width: 170px;
}
.item-int {
    margin:0 auto;
    padding:10px 0 30px;
}
.item-int h3 {
    margin:0;
    padding-left:10px;
}
.item-int img {
    width:160px;
}
.item-int .data {
    margin:5px 0;
    text-align:center;
}
.data span {
    font-size:12px;
    padding:0 10px;
}
.right {
    float:right;
}
.left {
    float:left;
}
.note {
    color:#444444;
    font-size:13px;
    text-align:right;
}

JavaScript

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives']);


/* Controllers */

function stageController($scope) {

    $scope.title = 'Planet Shop';

    $scope.items = [{
        title: 'Moon',
        price: '9.99€',
        src: 'http://brunoscopelliti.com/demo-resources/moon.png'
    }, {
        title: 'Sun',
        price: '29.99€',
        src: 'http://brunoscopelliti.com/demo-resources/sun.png'
    }, {
        title: 'Earth',
        price: '19.99€',
        src: 'http://brunoscopelliti.com/demo-resources/earth.png'
    }, {
        title: 'Pluton',
        price: '5.50€',
        src: 'http://brunoscopelliti.com/demo-resources/pluton.png'
    }, {
        title: 'Mars',
        price: '24.00€',
        src: 'http://brunoscopelliti.com/demo-resources/mars.png'
    }];

    $scope.cartItems = [];

    $scope.buyItem = function (title, price) {
        var objAdded = {
            title: title,
            price: price
        };
        $scope.cartItems.push(objAdded);
    }

}


/* Directives */

angular.module('myApp.directives', []).

directive('itemCard', function () {
    // return the directive definition object 
    return {
        scope: {
            title: '@itemTitle',
            price: '@itemPrice',
            src: '@itemSrc'
        },
        controller: function ($scope, $element, $attrs, $location) {
            $scope.addToCart = function (t, p) {
                var mainScope = angular.element("#main").scope();
                mainScope.buyItem(t, p);
                return false;
            };
        },
        replace: true,
        template: '<div class="item-int"><h3>{{title}}</h3><div class="data"><img src="{{src}}" title="{{title}}"><span class="left">price: {{price}}</span><span class="right"><a ng-click="addToCart(title, price);">Add to cart</a></span></div></div>'
    };
}).

directive('shoppingCart', function () {
    return {
        replace: true,
   ...