Fork Your Own Adventure

Angular Directive Demonstration

by Jessica Brady

HTML

<div ng-app="pager" ng-controller="pageController">
    <div ng-show="pageId == '1'" class="body container">
        <section>
             <h1>Beginning...</h1>

            <p>Your friend's house <i>is</i> still many miles away, and the rain is falling harder as each moment passes. You could wait in the car and listen to the radio, and perhaps the storm would let up.</p>
            <p>The sky splits into two skies as it opens up in lighting sheets, lighting first itself and then the ground, and it seems that the sky divides but increases in size with each flash.</p>
            <aside>Can sounds actually be deafening?</aside>
        </section>
        <div class="footer">
            <choose page="2" desc="walk to your friend's house"></choose>
            <choose page="4" desc="stay in the car"></choose>
        </div>
    </div>
    <div ng-show="pageId == '2'" class="body container">
        <section>
            <p>You get out of the car, and start to walk down the lonely highway. It is a while, but soon you see a gas station nearby. It looks like it might be deserted. It is hard to tell.</p>
            <p>The storm has lessened now, and the clouds have abandoned the moon to prying eyes. The moon is white and very cold in the evening sky in the wake of the storm.</p>
            <p>When the storm has passed, never forget, you may be still in its eye. The storm is not blind; the storm has one eye.</p>
        </section>
        <div class="footer">
            <choose page="5" desc="keep walking"></choose>
            <choose page="8" desc="investigate the gas station"></choose>
        </div>
    </div>
    <div ng-show="pageId == '3'" class="body container">
        <section>
            <p>You insert your quarter into the payphone, and dial the number for the cab company. Beep. Ring. A message comes over the receiver... telling you that no cabs are available, due to the thunderstorm.</p>
            <aside>And that was your only quarter.</aside>
      ...

CSS

.body {
    padding:10px;
    padding-bottom:60px;
    font: 75% georgia, sans-serif;
    line-height: 1.88889;
    color: #555753;
}
h1 {
    font: italic normal 1.4em georgia, sans-serif;
    letter-spacing: 1px;
    color: #7D775C;
}
button {
    font: italic normal 0.8em georgia, sans-serif;
    letter-spacing: 1px;
    color: #7D775C;
}
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
}
.footer2 {
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    background:#6cf;
}
.container {
    width: 660px;
}
section {
    float: left;
    margin: 10px;
    width: 420px;
}
aside {
    float: right;
    margin: 10px;
    width: 200px;
}
.sample-show-hide {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
    opacity:0;
}

JavaScript

// define a module called 'pager'
var mod = angular.module('pager', []);

// define an element custom directive called 'choose'
mod.directive('choose', function () {
    return {
        restrict: 'E', // only allow element
        scope: {
            page: '@page', // attributed scope
            desc: '@desc'
        },
        template: '<button ng-click="$parent.turnPage(page)">{{desc}} - go to page {{page}}</button>',
        transclude: false, // I'll be honest, I don't like
        replace: false // transclusion and replacement
    }
});

// define a controller for page behavior
mod.controller('pageController', function ($scope) {
    $scope.pageId = "1"
    $scope.fade = false;

    // the main function here sets the page id for show/hide
    $scope.turnPage = function (in_page, in_href) {
        if (in_href) {
            window.open(in_href + in_page, '_self', false)
        } else {
            $scope.pageId = in_page
        }
    }

    $scope.moxie = 3
    $scope.mojo = 3
    $scope.money = 3

    $scope.alterMojo = function (n) {
        if (n !== undefined) {
            $scope.mojo += parseInt(n)
            if ($scope.mojo < 0) $scope.mojo = 0
        }
    }

    $scope.alterMoxie = function (n) {
        if (n !== undefined) {
            $scope.moxie += parseInt(n)
            if ($scope.moxie < 0) $scope.moxie = 0
        }
    }

    $scope.alterMoney = function (n) {
        if (n !== undefined) {
            $scope.money += parseInt(n)
            if ($scope.money < 0) $scope.money = 0
        }
    }
});

mod.filter('voldemort', function () {
    return function (input, scope) {
        if (input.length > 10) {
            return 'aaaqa';
        }
        return ''; //input.substring(0, 1).toUpperCase() + input.substring(1);
    }
});

mod.directive('choice', function () {
    return {
        restrict: 'E',
        transclude: false,
        scope: {
            page: '@page',
            href: '@href',
            desc: '@desc',
   ...