XKE 2013.10.22 nesting and communication

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.3/angular.js"></script>
<calculator></calculator>

CSS

input {
    width: 25px
}

CoffeeScript

demo = angular.module 'demo', []

demo.directive 'calculator', () ->
    restrict: 'AE'
    template: '<div>
        <label for="valueA">A:</label><input type="number" id="valueA" ng-model="state.a" />
        *
        <label for="valueA">B:</label><input type="number" id="valueA" ng-model="state.b" />
        = {{result()}}
        <hr />
    </div>'
    scope: {}
    replace: true
    controller: ($scope) ->
        $scope.state = 
            a: 2
            b: 2
        $scope.result = -> $scope.state.a * $scope.state.b
    
angular.bootstrap document, ['demo']