[Issue-79] Angular directive: part 2

nosir · Aug 15, 2016 · 6704e3e · 6704e3e
1 parent c9beb09
commit 6704e3e
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ Cleave.js has a simple purpose: to help you format input text content automatica
 - Custom delimiter, prefix and blocks pattern
 - CommonJS / AMD mode
 - ReactJS component
+- AngularJS directive (1.x)
 
 **TL;DR** [the demo page](http://nosir.github.io/cleave.js/)
 
@@ -144,11 +145,55 @@ As you can see, here you simply use `<Cleave/>` as a normal `<input/>` field
 
 Usage for `Webpack`, `Browserify` and more in documentation: [ReactJS component usage](https://github.com/nosir/cleave.js/blob/master/doc/reactjs-component-usage.md)
 
+## AngularJS directive usage
+
+First include the directive module:
+
+```html
+<script src="cleave-angular.min.js"></script>
+<script src="cleave-phone.{country}.js"></script>
+```
+
+And in the model:
+
+```js
+angular.module('app', ['cleave.js'])
+
+.controller('AppController', function($scope) {
+    $scope.onCreditCardTypeChanged = function(type) {
+        $scope.model.creditCardType = type;
+    };
+
+    $scope.model = {
+        value: ''
+    };
+
+    $scope.options = {
+        creditCard: {
+            creditCard: true,
+            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
+        }
+    };
+});
+```
+
+Then easily you can apply `cleave` directive with `input` field:
+
+```html
+<div ng-controller="AppController">
+    <input ng-model="model.value" ng-whatever="..." type="text" placeholder="Enter credit card number"
+        cleave options="options.creditCard"/>
+</div>
+```
+
+More usage in documentation: [Angular directive usage](https://github.com/nosir/cleave.js/blob/master/doc/angularjs-directive-usage.md)
+
 ## Playground
 
 - [Plain JSFiddle (Basic usage)](https://jsfiddle.net/nosir/kbaxx64s/)
 - [Plain JSFiddle (More examples)](https://jsfiddle.net/nosir/aLnhdf3z/)
 - [React JSFiddle](https://jsfiddle.net/nosir/gLLsrxxf/)
+- [Angular JSFiddle](https://jsfiddle.net/nosir/q58sh22t/)
 
 ## Documentation
 
@@ -158,6 +203,7 @@ Usage for `Webpack`, `Browserify` and more in documentation: [ReactJS component
     - [Public methods](https://github.com/nosir/cleave.js/blob/master/doc/public-methods.md)
 - [Phone lib addon](https://github.com/nosir/cleave.js/blob/master/doc/phone-lib-addon.md)
 - [ReactJS component usage](https://github.com/nosir/cleave.js/blob/master/doc/reactjs-component-usage.md)
+- [AngularJS directive usage](https://github.com/nosir/cleave.js/blob/master/doc/angularjs-directive-usage.md)
 
 ## Building & Running tests
 
@@ -182,7 +228,7 @@ gulp mocha && gulp eslint
 - [x] Add credit card type detection callback
 - [x] Mocha unit tests for formatter
 - [ ] Fix the classic cursor jumping issue
-- [ ] AngularJS component (WIP...)
+- [x] AngularJS directive (1.x)
 - [ ] PhantomJS / Jest browser tests
 
 > For contributors, we have a [not in the plan](https://github.com/nosir/cleave.js/blob/master/doc/not-in-the-plan.md) list you may concern.

diff --git a/bower.json b/bower.json
@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "0.6.7",
+  "version": "0.6.9",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

diff --git a/dist/cleave-angular.js b/dist/cleave-angular.js
@@ -816,13 +816,26 @@ angular.module('cleave.js', [])
     .directive('cleave', function () {
         return {
             restrict: 'A',
+            require:  'ngModel',
 
             scope: {
-                options: '='
+                options:       '=',
+                onValueChange: '&?'
             },
 
             controller: function ($scope, $element) {
-                new Cleave($element[0], $scope.options);
+                $scope.cleave = new Cleave($element[0], $scope.options);
+                $scope.onValueChange = $scope.onValueChange || null;
+            },
+
+            link: function ($scope, $element, attrs, ngModel) {
+                if ($scope.onValueChange) {
+                    $scope.$watch(function () {
+                        return ngModel.$modelValue;
+                    }, function () {
+                        $scope.onValueChange()($scope.cleave.getFormattedValue(), $scope.cleave.getRawValue());
+                    });
+                }
             }
         };
     });
diff --git a/dist/cleave-angular.min.js b/dist/cleave-angular.min.js
diff --git a/dist/cleave-react.min.js b/dist/cleave-react.min.js
diff --git a/dist/cleave.min.js b/dist/cleave.min.js
diff --git a/doc/angularjs-directive-usage.md b/doc/angularjs-directive-usage.md
@@ -0,0 +1,100 @@
+# Cleave.js Documentation 
+
+[Documentation](https://github.com/nosir/cleave.js/blob/master/doc/doc.md) > AngularJS directive usage
+
+## Playground
+
+- [Angular JSFiddle](https://jsfiddle.net/nosir/q58sh22t/)
+
+## Basic usage
+
+First include the directive module:
+
+```html
+<script src="cleave-angular.min.js"></script>
+<script src="cleave-phone.{country}.js"></script>
+```
+
+And in your model:
+
+```js
+angular.module('app', ['cleave.js'])
+
+.controller('AppController', function($scope) {
+    $scope.onCreditCardTypeChanged = function(type) {
+        $scope.model.creditCardType = type;
+    };
+
+    $scope.model = {
+        value: ''
+    };
+
+    $scope.options = {
+        creditCard: {
+            creditCard: true,
+            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
+        }
+    };
+});
+```
+
+Then you can just use `cleave` directive with `input` field:
+
+```html
+<div ng-controller="AppController">
+    <input ng-model="model.value" 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:
+
+First in you model:
+
+```js
+angular.module('app', ['cleave.js'])
+
+.controller('AppController', function($scope) {
+    $scope.onCleaveValueChange = function(formattedValue, rawValue) {
+        $scope.model.formattedValue = formattedValue;
+        $scope.model.rawValue = rawValue;
+    };
+
+    $scope.onCreditCardTypeChanged = function(type) {
+        $scope.model.creditCardType = type;
+    };
+
+    $scope.model = {
+        value: ''
+    };
+
+    $scope.options = {
+        creditCard: {
+            creditCard: true,
+            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
+        }
+    };
+});
+```
+
+Then in your html:
+
+```html
+<div ng-controller="AppController">
+    <input ng-model="model.value" ng-whatever="..." type="text" placeholder="Enter credit card number"
+        cleave options="options.creditCard" on-value-change="onCleaveValueChange"/>
+
+    <p>raw 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.
diff --git a/gulp-tasks/build.js b/gulp-tasks/build.js
@@ -22,10 +22,22 @@ var paths = {
     dist:      './dist'
 };
 
-gulp.task('min', function () {
+gulp.task('min-mangle', function () {
     return gulp.src([
             path.join(paths.dist, 'cleave.js'),
-            path.join(paths.dist, 'cleave-react.js'),
+            path.join(paths.dist, 'cleave-react.js')
+        ])
+        .pipe(uglify({mangle: true}))
+        .pipe(header(getLicense(), {
+            version: packageInfo.version,
+            build:   (new Date()).toUTCString()
+        }))
+        .pipe(rename({suffix: '.min'}))
+        .pipe(gulp.dest(path.join(paths.dist)));
+});
+
+gulp.task('min-no-mangle', function () {
+    return gulp.src([
             path.join(paths.dist, 'cleave-angular.js')
         ])
         .pipe(uglify({mangle: false}))
@@ -60,4 +72,14 @@ gulp.task('js:angular', function () {
         .pipe(gulp.dest(paths.dist));
 });
 
-gulp.task('build', gulpsync.sync(['js', 'js:react', 'js:angular', 'min']));
+gulp.task('build', gulpsync.sync([
+    // sync
+    'js',
+    'js:react',
+    'js:angular',
+    [
+        // async
+        'min-mangle',
+        'min-no-mangle'
+    ]
+]));
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "0.6.7",
+  "version": "0.6.9",
   "author": {
     "name": "Max Huang",
     "url": "http://github.com/nosir",

diff --git a/src/Cleave.angular.js b/src/Cleave.angular.js
@@ -2,13 +2,26 @@ angular.module('cleave.js', [])
     .directive('cleave', function () {
         return {
             restrict: 'A',
+            require:  'ngModel',
 
             scope: {
-                options: '='
+                options:       '=',
+                onValueChange: '&?'
             },
 
             controller: function ($scope, $element) {
-                new Cleave($element[0], $scope.options);
+                $scope.cleave = new Cleave($element[0], $scope.options);
+                $scope.onValueChange = $scope.onValueChange || null;
+            },
+
+            link: function ($scope, $element, attrs, ngModel) {
+                if ($scope.onValueChange) {
+                    $scope.$watch(function () {
+                        return ngModel.$modelValue;
+                    }, function () {
+                        $scope.onValueChange()($scope.cleave.getFormattedValue(), $scope.cleave.getRawValue());
+                    });
+                }
             }
         };
     });