diff --git a/.gitignore b/.gitignore index d46049a..8706a7f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/* +bower_components/ /.project \ No newline at end of file diff --git a/bower.json b/bower.json index 6e82bda..0a343a2 100644 --- a/bower.json +++ b/bower.json @@ -18,5 +18,8 @@ "bower_components", "test", "tests" - ] + ], + "dependencies": { + "angular": "~1.4.3" + } } diff --git a/demo.html b/demo.html index f73e266..80599a3 100644 --- a/demo.html +++ b/demo.html @@ -3,19 +3,20 @@ - + +

Form and Fields

@@ -27,6 +28,13 @@
Type anything in form
- +

Form only +
+
+ + +
+
Type anything in form
+
diff --git a/dist/angular-bootstrap-validation.js b/dist/angular-bootstrap-validation.js index be677dc..5d09879 100644 --- a/dist/angular-bootstrap-validation.js +++ b/dist/angular-bootstrap-validation.js @@ -1,59 +1,86 @@ -(function(){ - - var validatorFn = function($timeout) { - return function(scope, element, ngClass, bsClass) { - $timeout(function() { - var input = element.find('input'); - if (!input.length) { - input = element.find('select'); - } - if (!input.length) { - input = element.find('textarea'); - } - if (input.length) { - scope.$watch(function() { - return input.hasClass(ngClass) && input.hasClass('ng-dirty'); - }, function(isValid) { - element.toggleClass(bsClass, isValid); - }); - } - }); - } - }; +(function(){ + /** + * @ngdoc module + * @name Bootstrap Validation + * + * @description + * Directives to apply bootstrap form classes on angular models + * + * You can either apply it to .form-group or to parent form + * + * This module was mainly written by SO users, see here: http://stackoverflow.com/questions/14348384/reconcile-angular-js-and-bootstrap-form-validation-styling + */ + angular + .module('bs-validation', []); +})(); - var successDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element[0].nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); - }); - } else { - bsProcessValidator(scope, element, 'ng-valid', 'has-success'); - } +(function(){ + /** + * @ngdoc directive + * @name bsHasError + * + * @description + * When used, the input field will add "has-error" class to the element if its dirty and invalid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-error .form-control {}" + */ + angular + .module('bs-validation') + .directive('bsHasError', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + element.find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); + }); + } else { + bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); + } + } + } + }]); +})(); +(function(){ - } - } - }; + /** + * @ngdoc directive + * @name bsHasSuccess + * + * @description + * When used, the input field will add "has-success" class to the element if its dirty and valid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-success .form-control {}" + */ + angular + .module('bs-validation') + .directive('bsHasSuccess', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + element.find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); + }); + } else { + bsProcessValidator(scope, element, 'ng-valid', 'has-success'); + } - var errorDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element[0].nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); - }); - } else { - bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); } - } - } - }; - - var mainDirectiveFn = function(bsProcessValidator) { + }]); +})(); +(function(){ + /** + * @ngdoc directive + * @name bsHas + * + * @description + * Apply both bsHasSuccess and bsHasError to all elements being validated within in. + * When used, the input field will add "has-success" class to the element if its dirty and valid and "has-error" class to if its dirty and invalid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-success .form-control {}" and ".has-error .form-controls {}" + */ + angular + .module('bs-validation') + .directive('bsHas', ['bsProcessValidator', function(bsProcessValidator) { return { restrict: 'A', link: function(scope, element) { @@ -69,8 +96,43 @@ } } - }; + }]); +})(); +(function(){ + /** + * @ngdoc service + * + * @name bsProcessValidator + * @descripion + * This service is applied to directives in link function to watch for changes + * The ngClass is the AngularJS class to be matched. The validation is done by angular, we just check the classes applied + * The bsClass is the bootstrap class applied to the element in case it's dirty and has the ngClass passed + */ + angular + .module('bs-validation') + .factory('bsProcessValidator', ['$timeout', function($timeout) { + return function(scope, element, ngClass, bsClass) { + $timeout(function() { + var input = element.find('input'); + if (!input.length) { + input = element.find('select'); + } + if (!input.length) { + input = element.find('textarea'); + } + if (input.length) { + scope.$watch(function() { + return input.hasClass(ngClass) && input.hasClass('ng-dirty'); + }, function(isValid) { + element.toggleClass(bsClass, isValid); + }); + } + }); + } + }]); +})(); +(function(){ /** * @ngdoc module * @name Bootstrap Validation @@ -83,9 +145,124 @@ * This module was mainly written by SO users, see here: http://stackoverflow.com/questions/14348384/reconcile-angular-js-and-bootstrap-form-validation-styling */ angular - .module('bs-validation', []) - .factory('bsProcessValidator', ['$timeout', validatorFn]) - .directive('bsHasSuccess', ['bsProcessValidator', successDirectiveFn]) - .directive('bsHasError', ['bsProcessValidator', errorDirectiveFn]) - .directive('bsHas', ['bsProcessValidator', mainDirectiveFn]); + .module('bs-validation', []); +})(); + +(function(){ + /** + * @ngdoc directive + * @name bsHasError + * + * @description + * When used, the input field will add "has-error" class to the element if its dirty and invalid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-error .form-control {}" + */ + angular + .module('bs-validation') + .directive('bsHasError', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + element.find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); + }); + } else { + bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); + } + } + } + }]); +})(); +(function(){ + + /** + * @ngdoc directive + * @name bsHasSuccess + * + * @description + * When used, the input field will add "has-success" class to the element if its dirty and valid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-success .form-control {}" + */ + angular + .module('bs-validation') + .directive('bsHasSuccess', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + element.find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); + }); + } else { + bsProcessValidator(scope, element, 'ng-valid', 'has-success'); + } + + } + } + }]); })(); +(function(){ + /** + * @ngdoc directive + * @name bsHas + * + * @description + * Apply both bsHasSuccess and bsHasError to all elements being validated within in. + * When used, the input field will add "has-success" class to the element if its dirty and valid and "has-error" class to if its dirty and invalid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-success .form-control {}" and ".has-error .form-controls {}" + */ + angular + .module('bs-validation') + .directive('bsHas', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + $(element[0]).find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); + bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); + }); + } else { + bsProcessValidator(scope, element, 'ng-valid', 'has-success'); + bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); + } + + } + } + }]); +})(); +(function(){ + /** + * @ngdoc service + * + * @name bsProcessValidator + * @descripion + * This service is applied to directives in link function to watch for changes + * The ngClass is the AngularJS class to be matched. The validation is done by angular, we just check the classes applied + * The bsClass is the bootstrap class applied to the element in case it's dirty and has the ngClass passed + */ + angular + .module('bs-validation') + .factory('bsProcessValidator', ['$timeout', function($timeout) { + return function(scope, element, ngClass, bsClass) { + $timeout(function() { + var input = element.find('input'); + if (!input.length) { + input = element.find('select'); + } + if (!input.length) { + input = element.find('textarea'); + } + if (input.length) { + scope.$watch(function() { + return input.hasClass(ngClass) && input.hasClass('ng-dirty'); + }, function(isValid) { + element.toggleClass(bsClass, isValid); + }); + } + }); + } + }]); + +})(); \ No newline at end of file diff --git a/dist/angular-bootstrap-validation.min.js b/dist/angular-bootstrap-validation.min.js new file mode 100644 index 0000000..d4702f9 --- /dev/null +++ b/dist/angular-bootstrap-validation.min.js @@ -0,0 +1 @@ +!function(){angular.module("bs-validation",[])}(),function(){angular.module("bs-validation").directive("bsHasError",["bsProcessValidator",function(n){return{restrict:"A",link:function(a,e){"form"===e[0].nodeName.toLowerCase()?e.find(".form-group").each(function(e,r){n(a,angular.element(r),"ng-invalid","has-error")}):n(a,e,"ng-invalid","has-error")}}}])}(),function(){angular.module("bs-validation").directive("bsHasSuccess",["bsProcessValidator",function(n){return{restrict:"A",link:function(a,e){"form"===e[0].nodeName.toLowerCase()?e.find(".form-group").each(function(e,r){n(a,angular.element(r),"ng-valid","has-success")}):n(a,e,"ng-valid","has-success")}}}])}(),function(){angular.module("bs-validation").directive("bsHas",["bsProcessValidator",function(n){return{restrict:"A",link:function(a,e){"form"===e[0].nodeName.toLowerCase()?$(e[0]).find(".form-group").each(function(e,r){n(a,angular.element(r),"ng-valid","has-success"),n(a,angular.element(r),"ng-invalid","has-error")}):(n(a,e,"ng-valid","has-success"),n(a,e,"ng-invalid","has-error"))}}}])}(),function(){angular.module("bs-validation").factory("bsProcessValidator",["$timeout",function(n){return function(a,e,r,i){n(function(){var n=e.find("input");n.length||(n=e.find("select")),n.length||(n=e.find("textarea")),n.length&&a.$watch(function(){return n.hasClass(r)&&n.hasClass("ng-dirty")},function(n){e.toggleClass(i,n)})})}}])}(),function(){angular.module("bs-validation",[])}(),function(){angular.module("bs-validation").directive("bsHasError",["bsProcessValidator",function(n){return{restrict:"A",link:function(a,e){"form"===e[0].nodeName.toLowerCase()?e.find(".form-group").each(function(e,r){n(a,angular.element(r),"ng-invalid","has-error")}):n(a,e,"ng-invalid","has-error")}}}])}(),function(){angular.module("bs-validation").directive("bsHasSuccess",["bsProcessValidator",function(n){return{restrict:"A",link:function(a,e){"form"===e[0].nodeName.toLowerCase()?e.find(".form-group").each(function(e,r){n(a,angular.element(r),"ng-valid","has-success")}):n(a,e,"ng-valid","has-success")}}}])}(),function(){angular.module("bs-validation").directive("bsHas",["bsProcessValidator",function(n){return{restrict:"A",link:function(a,e){"form"===e[0].nodeName.toLowerCase()?$(e[0]).find(".form-group").each(function(e,r){n(a,angular.element(r),"ng-valid","has-success"),n(a,angular.element(r),"ng-invalid","has-error")}):(n(a,e,"ng-valid","has-success"),n(a,e,"ng-invalid","has-error"))}}}])}(),function(){angular.module("bs-validation").factory("bsProcessValidator",["$timeout",function(n){return function(a,e,r,i){n(function(){var n=e.find("input");n.length||(n=e.find("select")),n.length||(n=e.find("textarea")),n.length&&a.$watch(function(){return n.hasClass(r)&&n.hasClass("ng-dirty")},function(n){e.toggleClass(i,n)})})}}])}(); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..a2f9d05 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,47 @@ +var gulp = require('gulp'), + concat = require('gulp-concat'), + uglify = require('gulp-uglifyjs'), + watch = require('gulp-watch'); + +var paths = { + dependencies: [ ], + appModules: [ + './src/*.mdl.js', + './src/**/*.js', + './src/**/**/*.js' + ] +}; +gulp.task('scripts', function(){ + + gulp.src(paths.appModules) + .pipe(concat('angular-bootstrap-validation.js')) + .pipe(gulp.dest('./dist')); + + gulp.src(['./bower_components/angular/angular.js', './bower_components/angular-i18n/angular-locale_pt.js']) + .pipe(concat('angular.js')) + .pipe(gulp.dest('./public/dist')); + + gulp.src([ + './bower_components/jquery/dist/jquery.js' + ]) + .pipe(concat('jquery.js')) + .pipe(gulp.dest('./public/dist')); +}); + +gulp.task('uglify', function() { + gulp.src(paths.appModules) + .pipe(uglify('angular-bootstrap-validation.min.js')) + .pipe(gulp.dest('./dist')) +}); + +gulp.task('dependencies', function(){ + gulp.src(paths.dependencies) + .pipe(concat('dependencies.js')) + .pipe(gulp.dest('./public/dist')); +}); + +gulp.task('watch', function(){ + gulp.watch(paths.appModules, ['scripts']); +}); + +gulp.task('default', ['scripts', 'dependencies', 'uglify']); diff --git a/karma.conf b/karma.conf new file mode 100644 index 0000000..d3d24e9 --- /dev/null +++ b/karma.conf @@ -0,0 +1,71 @@ +// Karma configuration +// Generated on Tue Feb 24 2015 00:06:10 GMT+0000 (WET) + +module.exports = function(config) { + config.set({ + + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + + + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['jasmine'], + + + + // list of files / patterns to load in the browser + files: [ + 'bower_components/angular/angular.js', + 'src/*.mdl.js', + 'src/**/*.mdl.js', + 'src/*.js', + 'src/**/*.js', + 'tests/unit/*.js' + ], + + + // list of files to exclude + exclude: [ + ], + + + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + }, + + + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress'], + + + // web server port + port: 9876, + + + // enable / disable colors in the output (reporters and logs) + colors: true, + + + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: true, + + + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: ['PhantomJS'], + + + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: false + }); +}; diff --git a/package.json b/package.json index 5758eee..6467772 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,20 @@ { - "name": "angular-bootstrap-validation", - "version": "0.0.4", - "repository": { - "type": "git", - "url": "git@github.com:guilhermegeek/angular-bootstrap-validation.git" - }, - "author": "Guilherme Cardoso ", - "description": "Directives to apply bootstrap styles to AngularJs form elements", - "homepage": "https://github.com/guilhermegeek/angular-bootstrap-validation", - "bugs": { - "email": "email@volupio.com" - }, - "devDependencies": { - "grunt": "~0.4.2", - "grunt-contrib-uglify": "~0.2.2", - "grunt-contrib-concat": "~0.4" - } + "name": "angular-bootstrap-validation", + "version": "0.0.4", + "repository": { + "type": "git", + "url": "git@github.com:guilhermegeek/angular-bootstrap-validation.git" + }, + "author": "Guilherme Cardoso ", + "description": "Directives to apply bootstrap styles to AngularJs form elements", + "homepage": "https://github.com/guilhermegeek/angular-bootstrap-validation", + "bugs": { + "email": "email@volupio.com" + }, + "devDependencies": { + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-uglifyjs": "^0.6.2", + "gulp-watch": "^4.3.4" + } } diff --git a/src/bs.mdl.js b/src/bs.mdl.js new file mode 100644 index 0000000..f9d6d9f --- /dev/null +++ b/src/bs.mdl.js @@ -0,0 +1,15 @@ +(function(){ + /** + * @ngdoc module + * @name Bootstrap Validation + * + * @description + * Directives to apply bootstrap form classes on angular models + * + * You can either apply it to .form-group or to parent form + * + * This module was mainly written by SO users, see here: http://stackoverflow.com/questions/14348384/reconcile-angular-js-and-bootstrap-form-validation-styling + */ + angular + .module('bs-validation', []); +})(); diff --git a/src/has-error.drv.js b/src/has-error.drv.js new file mode 100644 index 0000000..584cb67 --- /dev/null +++ b/src/has-error.drv.js @@ -0,0 +1,26 @@ +(function(){ + /** + * @ngdoc directive + * @name bsHasError + * + * @description + * When used, the input field will add "has-error" class to the element if its dirty and invalid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-error .form-control {}" + */ + angular + .module('bs-validation') + .directive('bsHasError', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + element.find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); + }); + } else { + bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); + } + } + } + }]); +})(); \ No newline at end of file diff --git a/src/has-success.drv.js b/src/has-success.drv.js new file mode 100644 index 0000000..645dd63 --- /dev/null +++ b/src/has-success.drv.js @@ -0,0 +1,28 @@ +(function(){ + + /** + * @ngdoc directive + * @name bsHasSuccess + * + * @description + * When used, the input field will add "has-success" class to the element if its dirty and valid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-success .form-control {}" + */ + angular + .module('bs-validation') + .directive('bsHasSuccess', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + element.find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); + }); + } else { + bsProcessValidator(scope, element, 'ng-valid', 'has-success'); + } + + } + } + }]); +})(); \ No newline at end of file diff --git a/src/has.drv.js b/src/has.drv.js new file mode 100644 index 0000000..66b2406 --- /dev/null +++ b/src/has.drv.js @@ -0,0 +1,30 @@ +(function(){ + /** + * @ngdoc directive + * @name bsHas + * + * @description + * Apply both bsHasSuccess and bsHasError to all elements being validated within in. + * When used, the input field will add "has-success" class to the element if its dirty and valid and "has-error" class to if its dirty and invalid + * Dont forget to add the class form-control to the element, as boostrap apply style with ".has-success .form-control {}" and ".has-error .form-controls {}" + */ + angular + .module('bs-validation') + .directive('bsHas', ['bsProcessValidator', function(bsProcessValidator) { + return { + restrict: 'A', + link: function(scope, element) { + if (element[0].nodeName.toLowerCase() === 'form') { + $(element[0]).find('.form-group').each(function(i, formGroup) { + bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); + bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); + }); + } else { + bsProcessValidator(scope, element, 'ng-valid', 'has-success'); + bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); + } + + } + } + }]); +})(); \ No newline at end of file diff --git a/src/main.js b/src/main.js deleted file mode 100644 index be677dc..0000000 --- a/src/main.js +++ /dev/null @@ -1,91 +0,0 @@ -(function(){ - - var validatorFn = function($timeout) { - return function(scope, element, ngClass, bsClass) { - $timeout(function() { - var input = element.find('input'); - if (!input.length) { - input = element.find('select'); - } - if (!input.length) { - input = element.find('textarea'); - } - if (input.length) { - scope.$watch(function() { - return input.hasClass(ngClass) && input.hasClass('ng-dirty'); - }, function(isValid) { - element.toggleClass(bsClass, isValid); - }); - } - }); - } - }; - - var successDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element[0].nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); - }); - } else { - bsProcessValidator(scope, element, 'ng-valid', 'has-success'); - } - - } - } - }; - - var errorDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element[0].nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); - }); - } else { - bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); - } - - } - } - }; - - var mainDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element[0].nodeName.toLowerCase() === 'form') { - $(element[0]).find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); - bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); - }); - } else { - bsProcessValidator(scope, element, 'ng-valid', 'has-success'); - bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); - } - - } - } - }; - - /** - * @ngdoc module - * @name Bootstrap Validation - * - * @description - * Directives to apply bootstrap form classes on angular models - * - * You can either apply it to .form-group or to parent form - * - * This module was mainly written by SO users, see here: http://stackoverflow.com/questions/14348384/reconcile-angular-js-and-bootstrap-form-validation-styling - */ - angular - .module('bs-validation', []) - .factory('bsProcessValidator', ['$timeout', validatorFn]) - .directive('bsHasSuccess', ['bsProcessValidator', successDirectiveFn]) - .directive('bsHasError', ['bsProcessValidator', errorDirectiveFn]) - .directive('bsHas', ['bsProcessValidator', mainDirectiveFn]); -})(); diff --git a/src/main.js~ b/src/main.js~ deleted file mode 100644 index 5f9d5b6..0000000 --- a/src/main.js~ +++ /dev/null @@ -1,87 +0,0 @@ -(function(){ - var validatorFn = function($timeout) { - return function(scope, element, ngClass, bsClass) { - $timeout(function() { - var input = element.find('input'); - if (!input.length) { - input = element.find('select'); - } - if (!input.length) { - input = element.find('textarea'); - } - if (input.length) { - scope.$watch(function() { - return input.hasClass(ngClass) && input.hasClass('ng-dirty'); - }, function(isValid) { - element.toggleClass(bsClass, isValid); - }); - } - }); - } - }; - var successDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element.get(0).nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); - }); - } else { - bsProcessValidator(scope, element, 'ng-valid', 'has-success'); - } - - } - } - }; - var errorDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element.get(0).nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); - }); - } else { - bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); - } - - } - } - }; - - var mainDirectiveFn = function(bsProcessValidator) { - return { - restrict: 'A', - link: function(scope, element) { - if (element[0].nodeName.toLowerCase() === 'form') { - element.find('.form-group').each(function(i, formGroup) { - bsProcessValidator(scope, angular.element(formGroup), 'ng-valid', 'has-success'); - bsProcessValidator(scope, angular.element(formGroup), 'ng-invalid', 'has-error'); - }); - } else { - bsProcessValidator(scope, element, 'ng-valid', 'has-success'); - bsProcessValidator(scope, element, 'ng-invalid', 'has-error'); - } - - } - } - }; - /** - * @ngdoc module - * @name Bootstrap Validation - * - * @description - * Directives to apply bootstrap form classes on angular models - * - * You can either apply it to .form-group or to parent form - * - * This module was mainly written by SO users, see here: http://stackoverflow.com/questions/14348384/reconcile-angular-js-and-bootstrap-form-validation-styling - */ - angular - .module('bs-validation', []) - .factory('bsProcessValidator', ['$timeout', validatorFn]) - .directive('bsHasSuccess', ['bsProcessValidator', successDirectiveFn]) - .directive('bsHasError', ['bsProcessValidator', errorDirectiveFn]) - .directive('bsHas', ['bsProcessValidator', mainDirectiveFn]); -})(); diff --git a/src/process-validator.svc.js b/src/process-validator.svc.js new file mode 100644 index 0000000..7134589 --- /dev/null +++ b/src/process-validator.svc.js @@ -0,0 +1,34 @@ +(function(){ + /** + * @ngdoc service + * + * @name bsProcessValidator + * @descripion + * This service is applied to directives in link function to watch for changes + * The ngClass is the AngularJS class to be matched. The validation is done by angular, we just check the classes applied + * The bsClass is the bootstrap class applied to the element in case it's dirty and has the ngClass passed + */ + angular + .module('bs-validation') + .factory('bsProcessValidator', ['$timeout', function($timeout) { + return function(scope, element, ngClass, bsClass) { + $timeout(function() { + var input = element.find('input'); + if (!input.length) { + input = element.find('select'); + } + if (!input.length) { + input = element.find('textarea'); + } + if (input.length) { + scope.$watch(function() { + return input.hasClass(ngClass) && input.hasClass('ng-dirty'); + }, function(isValid) { + element.toggleClass(bsClass, isValid); + }); + } + }); + } + }]); + +})(); \ No newline at end of file