refactor(tagsInput): Changed options initialization

Refactored options initialization code in order to make it simpler and easier to be extracted into a service in the future so the autocomplete directive can make use of it. BREAKING CHANGE: The ngClass option was renamed as customClass so it's clear that that property is just a value and not the ngClass directive.
mbenford · Nov 28, 2013 · 298bf11 · 298bf11
1 parent 00a9dcb
commit 298bf11
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 32 deletions.
diff --git a/src/tags-input.js b/src/tags-input.js
@@ -29,35 +29,21 @@ angular.module('tags-input', []);
  * @param {expression} onTagRemoved Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
  */
 angular.module('tags-input').directive('tagsInput', function($interpolate) {
-    function loadOptions(scope, attrs) {
-        function getStr(name, defaultValue) {
-            return attrs[name] ? $interpolate(attrs[name])(scope.$parent) : defaultValue;
-        }
+    function initializeOptions(scope, attrs, options) {
+        var converters = {};
+        converters[String] = function(value) { return value; };
+        converters[Number] = function(value) { return parseInt(value, 10); };
+        converters[Boolean] = function(value) { return value === 'true'; };
+        converters[RegExp] = function(value) { return new RegExp(value); };
 
-        function getInt(name, defaultValue) {
-            var value = getStr(name, null);
-            return value ? parseInt(value, 10) : defaultValue;
-        }
+        scope.options = {};
 
-        function getBool(name, defaultValue) {
-            var value = getStr(name, null);
-            return value ? value === 'true' : defaultValue;
-        }
+        angular.forEach(options, function(value, key) {
+            var interpolatedValue = attrs[key] && $interpolate(attrs[key])(scope.$parent),
+                converter = converters[options[key].type];
 
-        scope.options = {
-            cssClass: getStr('ngClass', ''),
-            placeholder: getStr('placeholder', 'Add a tag'),
-            tabindex: getInt('tabindex', ''),
-            removeTagSymbol: getStr('removeTagSymbol', String.fromCharCode(215)),
-            replaceSpacesWithDashes: getBool('replaceSpacesWithDashes', true),
-            minLength: getInt('minLength', 3),
-            maxLength: getInt('maxLength', ''),
-            addOnEnter: getBool('addOnEnter', true),
-            addOnSpace: getBool('addOnSpace', false),
-            addOnComma: getBool('addOnComma', true),
-            allowedTagsPattern: new RegExp(getStr('allowedTagsPattern', '^[a-zA-Z0-9\\s]+$')),
-            enableEditingLastTag: getBool('enableEditingLastTag', false)
-        };
+            scope.options[key] = interpolatedValue ? converter(interpolatedValue) : options[key].defaultValue;
+        });
     }
 
     function SimplePubSub() {
@@ -80,10 +66,14 @@ angular.module('tags-input').directive('tagsInput', function($interpolate) {
 
     return {
         restrict: 'E',
-        scope: { tags: '=ngModel', onTagAdded: '&', onTagRemoved: '&' },
+        scope: {
+            tags: '=ngModel',
+            onTagAdded: '&',
+            onTagRemoved: '&'
+        },
         replace: false,
         transclude: true,
-        template: '<div class="ngTagsInput {{ options.cssClass }}" transclude-append>' +
+        template: '<div class="ngTagsInput" ng-class="options.customClass" transclude-append>' +
                   '  <div class="tags">' +
                   '    <ul>' +
                   '      <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
@@ -104,14 +94,27 @@ angular.module('tags-input').directive('tagsInput', function($interpolate) {
             var events = new SimplePubSub(),
                 shouldRemoveLastTag;
 
-            loadOptions($scope, $attrs);
+            initializeOptions($scope, $attrs, {
+                customClass: { type: String, defaultValue: '' },
+                placeholder: { type: String, defaultValue: 'Add a tag' },
+                tabindex: { type: Number },
+                removeTagSymbol: { type: String, defaultValue: String.fromCharCode(215) },
+                replaceSpacesWithDashes: { type: Boolean, defaultValue: true },
+                minLength: { type: Number, defaultValue: 3 },
+                maxLength: { type: Number },
+                addOnEnter: { type: Boolean, defaultValue: true },
+                addOnSpace: { type: Boolean, defaultValue: false },
+                addOnComma: { type: Boolean, defaultValue: true },
+                allowedTagsPattern: { type: RegExp, defaultValue: /^[a-zA-Z0-9\s]+$/ },
+                enableEditingLastTag: { type: Boolean, defaultValue: false }
+            });
 
             events.on('tag-added', $scope.onTagAdded);
             events.on('tag-removed', $scope.onTagRemoved);
 
             $scope.newTag = '';
             $scope.tags = $scope.tags || [];
-            
+
             $scope.tryAdd = function() {
                 var changed = false;
                 var tag = $scope.newTag;

diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
@@ -141,9 +141,9 @@ describe('tags-input-directive', function() {
             expect($scope.tags).toEqual(['foo']);
         });
 
-        it('adds a custom CSS class to the container div when ng-class option is provided', function() {
+        it('adds a custom CSS class to the container div when custom-class option is provided', function() {
             // Arrange/Act
-            compile('ng-class="myClass"');
+            compile('custom-class="myClass"');
 
             // Arrange
             expect(element.find('div').hasClass('myClass')).toBe(true);