[Issue-79] Angular directive: use $formatters

.eslintrc.js

@@ -1,8 +1,7 @@
 module.exports = {
     "parser":       "babel-eslint",
     "globals":      {
-        "angular": 1,
-        "Cleave":  1
+        "angular": 1
     },
     "rules":        {
         "quotes":          [

README.md

@@ -154,7 +154,7 @@ First include the directive module:
 <script src="cleave-phone.{country}.js"></script>
 ```
 
-And in the model:
+And in your model:
 
 ```js
 angular.module('app', ['cleave.js'])
@@ -165,7 +165,7 @@ angular.module('app', ['cleave.js'])
     };
 
     $scope.model = {
-        value: ''
+        rawValue: ''
     };
 
     $scope.options = {
@@ -177,11 +177,11 @@ angular.module('app', ['cleave.js'])
 });
 ```
 
-Then easily you can apply `cleave` directive with `input` field:
+Then easily you can apply `cleave` directive to `input` field:
 
 ```html
 <div ng-controller="AppController">
-    <input ng-model="model.value" ng-whatever="..." type="text" placeholder="Enter credit card number"
+    <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
         cleave options="options.creditCard"/>
 </div>
 ```

bower.json

@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "0.6.9",
+  "version": "0.6.10",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

dist/cleave-angular.js

@@ -823,19 +823,26 @@ angular.module('cleave.js', [])
                 onValueChange: '&?'
             },
 
-            controller: function ($scope, $element) {
-                $scope.cleave = new Cleave($element[0], $scope.options);
-                $scope.onValueChange = $scope.onValueChange || null;
-            },
+            compile: function () {
+                return {
+                    pre: function ($scope, $element, attrs, ngModelCtrl) {
+                        $scope.cleave = new window.Cleave($element[0], $scope.options);
 
-            link: function ($scope, $element, attrs, ngModel) {
-                if ($scope.onValueChange) {
-                    $scope.$watch(function () {
-                        return ngModel.$modelValue;
-                    }, function () {
-                        $scope.onValueChange()($scope.cleave.getFormattedValue(), $scope.cleave.getRawValue());
-                    });
-                }
+                        ngModelCtrl.$formatters.push(function (val) {
+                            $scope.cleave.setRawValue(val);
+
+                            return $scope.cleave.getFormattedValue();
+                        });
+
+                        ngModelCtrl.$parsers.push(function (newFormattedValue) {
+                            if ($scope.onValueChange) {
+                                $scope.onValueChange()(newFormattedValue);
+                            }
+
+                            return $scope.cleave.getRawValue();
+                        });
+                    }
+                };
             }
         };
     });

doc/angularjs-directive-usage.md

@@ -26,7 +26,7 @@ angular.module('app', ['cleave.js'])
     };
 
     $scope.model = {
-        value: ''
+        rawValue: ''
     };
 
     $scope.options = {
@@ -38,36 +38,38 @@ angular.module('app', ['cleave.js'])
 });
 ```
 
-Then you can just use `cleave` directive with `input` field:
+Then easily you can apply `cleave` directive to `input` field:
 
 ```html
 <div ng-controller="AppController">
-    <input ng-model="model.value" ng-whatever="..." type="text" placeholder="Enter credit card number"
+    <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
         cleave options="options.creditCard"/>
 </div>
 ```
 
 ## Advanced usage
 
-Sometimes you might want to get the raw value. Here is the way to deal with it:
+By using `Cleave.js`, angular renders the input field with the formatted value, but keeps `ng-model` value as the raw value.
+
+If you are looking to obtain the formatted value, here is the way:
 
 First in you model:
 
 ```js
 angular.module('app', ['cleave.js'])
 
 .controller('AppController', function($scope) {
-    $scope.onCleaveValueChange = function(formattedValue, rawValue) {
+    $scope.onCleaveValueChange = function(formattedValue) {
         $scope.model.formattedValue = formattedValue;
-        $scope.model.rawValue = rawValue;
     };
 
     $scope.onCreditCardTypeChanged = function(type) {
         $scope.model.creditCardType = type;
     };
 
     $scope.model = {
-        value: ''
+        rawValue: '',
+        formattedValue: ''
     };
 
     $scope.options = {
@@ -83,18 +85,16 @@ Then in your html:
 
 ```html
 <div ng-controller="AppController">
-    <input ng-model="model.value" ng-whatever="..." type="text" placeholder="Enter credit card number"
+    <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
         cleave options="options.creditCard" on-value-change="onCleaveValueChange"/>
 
-    <p>raw value: {{model.rawValue}}</p>
+    <p>raw (ng-model) value: {{model.rawValue}}</p>
     <p>formatted value: {{model.formattedValue}}</p>
 
-    <p>ng-model value: {{model.value}}</p>
-
     <p>type: {{model.creditCardType}}</p>
 </div>
 ```
 
 As you can see, by passing the function (without `()`) to `on-value-change`, you register a callback from `cleave.js` directive.
 
-Then in the callback, it returns `formattedValue` and `rawValue`. `formattedValue` here is same as your `ng-model` value.
+Then in the callback, it returns `formattedValue` as the only parameter.

package.json

@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "0.6.9",
+  "version": "0.6.10",
   "author": {
     "name": "Max Huang",
     "url": "http://github.com/nosir",

src/Cleave.angular.js

@@ -9,19 +9,26 @@ angular.module('cleave.js', [])
                 onValueChange: '&?'
             },
 
-            controller: function ($scope, $element) {
-                $scope.cleave = new Cleave($element[0], $scope.options);
-                $scope.onValueChange = $scope.onValueChange || null;
-            },
+            compile: function () {
+                return {
+                    pre: function ($scope, $element, attrs, ngModelCtrl) {
+                        $scope.cleave = new window.Cleave($element[0], $scope.options);
+
+                        ngModelCtrl.$formatters.push(function (val) {
+                            $scope.cleave.setRawValue(val);
+
+                            return $scope.cleave.getFormattedValue();
+                        });
+
+                        ngModelCtrl.$parsers.push(function (newFormattedValue) {
+                            if ($scope.onValueChange) {
+                                $scope.onValueChange()(newFormattedValue);
+                            }
 
-            link: function ($scope, $element, attrs, ngModel) {
-                if ($scope.onValueChange) {
-                    $scope.$watch(function () {
-                        return ngModel.$modelValue;
-                    }, function () {
-                        $scope.onValueChange()($scope.cleave.getFormattedValue(), $scope.cleave.getRawValue());
-                    });
-                }
+                            return $scope.cleave.getRawValue();
+                        });
+                    }
+                };
             }
         };
     });

test/NumeralFormatter_spec.js

@@ -10,7 +10,7 @@ describe('NumeralFormatter', function () {
             title.push('Thousands Group Style: ' + numeral.thousandsGroupStyle);
         }
 
-        if (numeral.numeralDecimalScale !== undefined) {
+        if (numeral.numeralDecimalScale || numeral.numeralDecimalScale === 0) {
             title.push('Decimal Scale: ' + numeral.numeralDecimalScale);
         }