so mamy things...

static/coffee/directives/ratinput.coffee

@@ -0,0 +1,64 @@
+template = """
+<div class="row rat-input">
+    <div class="row" ng-show="!edit" >
+        <div class="columns large-12" style="text-align: center;">
+            <span class="fraction-box" ng-click="enableEdit()">
+                <span  ng-bind="nominator"></span> &frasl; <span ng-bind="denominator" ></span>
+                <i class="fa fa-pencil-square-o" ng-show="!ngDisabled"></i>
+            </span>
+        </div>
+    </div>
+    <div  ng-show="edit" class="edit">
+        <form  ng-submit="edit=false">
+            <div class="large-12 columns" style="text-align: center;">
+                <input ng-model="nominator" type="text" ng-change="changeModel()"  ng-disabled="ngDisabled">
+                <span style="text-align: center;">&frasl;<span>
+                <input ng-model="denominator" type="text" ng-change="changeModel()" ng-disabled="ngDisabled">
+                <i class="fa fa-check" ng-click="edit=false"></i>
+                <input type="submit" style="display:none;">
+            </div>
+        </form>
+    </div>
+</div>
+"""
+
+
+define ["app", "angularAMD", "lodash", "services/rationals"], (app, angularAMD, _, rationals) ->
+
+    angularAMD.directive "ratInput", () ->
+        directive =
+                restrict: 'E',
+                template: template
+                scope:
+                    ngModel: "="
+                    ngDisabled: "="
+                controller: [ '$scope', "rationals", ($scope, rationals) ->
+
+                    $scope.getNominator = ()->
+                        if _.contains($scope.ngModel, "/")
+                            return Number($scope.ngModel.substr(0, $scope.ngModel.indexOf("/")))
+                        Number($scope.ngModel)
+
+                    $scope.getDenominator = () ->
+                        if _.contains($scope.ngModel, "/")
+                            return Number($scope.ngModel.substr($scope.ngModel.indexOf("/") + 1))
+                        1
+
+                    $scope.changeModel = ()->
+                        $scope.ngModel = rationals.newRat($scope.nominator, $scope.denominator)
+
+                    $scope.enableEdit = () ->
+                        if not $scope.ngDisabled
+                            $scope.edit = true
+
+                    $scope.init = () ->
+                        $scope.nominator = rationals.getNominator($scope.ngModel)
+                        $scope.denominator = $scope.getDenominator()
+
+                    $scope.$watch 'ngModel', () ->
+                        $scope.init()
+
+                    $scope.init()
+
+                ]
+        return directive