XKE 2013.10.22 nesting and communication (full)

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>
    <key op="+"></key>
    <key op="-"></key>
    <key op="/"></key>
    <key op="*"></key>
</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" />
        {{state.operation}}
        <label for="valueA">B:</label><input type="number" id="valueA" ng-model="state.b" />
        = {{result()}}
        <hr />
        <div ng-transclude></div>
    </div>'
    transclude: true
    scope: false
    replace: true
    controller: ($scope) ->
        $scope.state = 
            a: 2
            b: 2
            operation: '*'
        $scope.result = -> $scope.$eval("state.a #{$scope.state.operation} state.b")
        
        @state = $scope.state
    link: (scope, elm, attrs, ctrl) ->

demo.directive 'key', () ->
    restrict: 'AE'
    require: '^calculator'
    template: '<button ng-disabled="calculator.operation == op" ng-click="calculator.operation = op">{{op}}</button>'
    scope: 
        op: '@'
    link: (scope, elm, attrs, ctrl) ->
        scope.calculator = ctrl
    
angular.bootstrap document, ['demo']