XKE Demo 2

by Mike Kotsur

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<div ng-init="member = {a: 0, b:0};">
    
    <h3>Calculator!</h3>
    
    <div>
        <label for="valueA">A:</label><input type="number" id="valueA" ng-model="member.a" />
        <label for="valueA">B:</label><input type="number" id="valueA" ng-model="member.b" />
    </div>
            
    <h3>Results</h3>
        
    <div><user-result name="a + b" result="member.a + member.b" /></div>
    <div><user-result name="a - b" result="member.a + member.b" /></div>
    <div><user-result name="a : b" result="member.a / member.b" /></div>

</div>

CSS

div[ng-controller="firstCtrl"] {
    background-color: blue;
    height: 300px;
    width: 500px;
    color: yellow;
}

div[ng-controller="secondCtrl"] {
    background-color: grey;
    height: 200px;
    width: 300px;
    color: black;
    margin-left: 100px;
}

CoffeeScript

demo = angular.module 'demo', []

demo.directive 'userResult', () ->
    restrict: 'EA'
    template: '<b>{{name}} : {{result()}}'
    scope: 
        name: '@'
        result: "&"
    link: (scope, elm, attrs, ctrl) ->
    
    
angular.bootstrap document, ['demo']