AngularJS Foundations

$apply demo

/* index.html */
<html ng-app="noteriousApp">

<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="style.css"/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl" class="bg-blue">
<header class="navbar-clear" role="banner">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">
            <img src="http://noterio.us/assets/img/logo.png" alt="noterio.us"/>
        </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a class="blue" href="http://angularjs.org/" target="_blank">AngularJS</a>
            </li>
            <li>
                <a class="blue" href="https://github.com/simpulton/noterious" target="_blank">GITHUB</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</header>
<div id="content-container">
  <div content-item><h2>{{count}}</h2></div>
</div>
</body>

</html>

/* style.css */
html, body {
    height: 100%;
    min-height: 100%;
}

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    padding: 10px;
    border: 10px solid #f5ead9;
}

.bg-blue {
    background: url(http://noterio.us/assets/img//bg-blue.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-clear a:hover.blue {
    color: #4f92a8;
}

.navbar-clear a:hover.green {
    color: #87a961;
}

.navbar-clear a:hover.orange {
    color: #f6512d;
}

.navbar-clear a:hover.red {
    color: #a93d41;
}

.navbar-clear a:hover.yellow {
    color: #f4cb48;
}

input:focus, textarea { outline: none !important; }

*, *:before, *:after {box-sizing:  border-box !important;}

.navbar-clear {
    background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
    background: rgba(255, 255, 255, 0);
}

.navbar-clear a {
    color: #f5ead9;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}

.navbar-clear .icon-bar {
    background-color: #f5ead9;
}

.navbar-clear .nav>li>a:hover, .navbar-clear .nav>li>a:focus {
    text-decoration: none;
    background: rgba(245, 234, 217, .6);
}

#content-container {
    margin-left: 10px;
}

a.view {
    color: #333;
}

a.view:hover, a.view:focus {
    color: #333;
}

.x-small {
    color: #333333;
    font-size: 11px;
}

.medium {
    font-size: 18px;
    font-weight: bold;
}

.large {
    color: #f5ead9;
    font-size: 24px;
    font-weight: bold;
}

.edit .bottom {
    position: absolute;
    bottom: 40px;
}

.create .bottom {
    position: absolute;
    bottom: 56px;
}

.edit .top-right-corner {
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 2px;
    background:none;
    border:none;
    box-shadow:none;
}

.edit .bottom-right-corner {
    cursor: pointer;
    position: absolute;
    right: 14px;
    bottom: 22px;
    background:none;
    border:none;
    box-shadow:none;
}

.create .bottom-right-corner {
    cursor: pointer;
    position: absolute;
    right: 8px;
    bottom: 38px;
    background:none;
    border:none;
    box-shadow:none;
}


#content-container .board {
    display: inline-block;
    min-height: 200px;
    max-width: 100%;
    line-height: 1.428571429;
    background-image: url(http://noterio.us/assets/img/note-view.png);
    width: 360px;
    height: 220px;
    padding:  20px;
    margin: 0px 15px 0px 0px;
    background-repeat: no-repeat;
    background-position: top left;
    position: relative;
    padding-top: 34px;
}

#content-container .note {
    display: inline-block;
    min-height: 200px;
    max-width: 100%;
    line-height: 1.428571429;
    background-image: url(http://noterio.us/assets/img/note.png);
    width: 360px;
    height: 220px;
    padding:  20px;
    margin: 0px 15px 0px 0px;
    background-repeat: no-repeat;
    background-position: top left;
    position: relative;
    padding-top: 34px;
}


#content-container .board.create, #content-container .note.create {
    background-image: url(http://noterio.us/assets/img/note-create.png);
    height: 240px;
}

.edit input[type=text], .edit textarea {
    color: #333333;
    border: 1px solid #f5ead9;
    width: 100%;
    resize: none;
    background-color: #f5ead9;
}

.create input[type=text], .create textarea {
    color: #a69f95;
    border: 1px solid #d7cebf;
    width: 100%;
    resize: none;
    background-color: #f5ead9;
}

.edit input[type=text]:hover, .edit textarea:hover,
.edit input[type=text]:focus, .edit textarea:focus {
  border: 1px solid #d7cebf;
}

.create fieldset > * {
    margin: 2px 0;
}

.create form {
    margin: 0px;
}

....

# script.js
angular.module('noteriousApp', [])
    .controller('MainCtrl', function ($scope) {
      //
    })
    .directive('contentItem', function () {
        var linker = function (scope, element, attrs) {
            element.on('click', function(){
                console.log('click fired!');
                scope.$apply(function() {
                  scope.count++;
                });
            })
        }

        var controller = function($scope) {
            $scope.count = 0;
        };

        return {
            link: linker,
            controller: controller
        };
    });