From 215fe923b68e0e6034ae34c9b06ea89dff7d1110 Mon Sep 17 00:00:00 2001
From: Logan Barnett <logustus@gmail.com>
Date: Fri, 13 Mar 2015 17:14:57 -0700
Subject: [PATCH] feat(tagsInput): Add newTagText option

Add an option for binding to the text of the inner input element.
This feature is important because it allows developers to know when
the input has changed as well the state of the input at the time of
the change. An example use case is doing custom validations that
regular expressions couldn't satisfy.

Closes #197
---
 src/tags-input.js       | 15 +++++++++++++++
 test/tags-input.spec.js | 27 +++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/src/tags-input.js b/src/tags-input.js
index f768251e..495067d3 100644
--- a/src/tags-input.js
+++ b/src/tags-input.js
@@ -10,6 +10,8 @@
  *
  * @param {string} ngModel Assignable angular expression to data-bind to.
  * @param {string=} [template=NA] URL or id of a custom template for rendering each tag.
+ * @param {string} newTagText Assignable angular expression for data-binding to the underlying input for a new tag.
+ * @param {string=} [displayProperty=text] Property to be rendered as the tag label.
  * @param {string=} [keyProperty=text] Property to be used as a unique identifier for the tag.
  * @param {string=} [displayProperty=text] Property to be rendered as the tag label.
  * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values.
@@ -151,6 +153,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu
         require: 'ngModel',
         scope: {
             tags: '=ngModel',
+            newTagText: '=?',
             onTagAdding: '&',
             onTagAdded: '&',
             onInvalidTag: '&',
@@ -262,6 +265,18 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu
                 }
             };
 
+            scope.$watch('newTag.text', function(value) {
+                if(scope.newTag.text !== scope.newTagText) {
+                    scope.newTagText = value;
+                }
+            });
+
+            scope.$watch('newTagText', function(value) {
+                if(scope.newTag.text !== scope.newTagText) {
+                    scope.newTag.setText(value);
+                }
+            });
+
             scope.track = function(tag) {
                 return tag[options.keyProperty || options.displayProperty];
             };
diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
index 76d56e76..95f6702c 100644
--- a/test/tags-input.spec.js
+++ b/test/tags-input.spec.js
@@ -440,6 +440,33 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('new-tag-text option', function() {
+        it('updates as text is typed into the input field', function() {
+            // Arrange
+            compile('new-tag-text="innerModel"');
+
+            // Act
+            sendKeyPress('f'.charCodeAt(0));
+            sendKeyPress('o'.charCodeAt(0));
+            sendKeyPress('o'.charCodeAt(0));
+
+            // Assert
+            expect($scope.innerModel).toEqual('foo');
+        });
+
+        it('updates the input field as the scope\'s model changes', function() {
+            // Arrange
+            compile('new-tag-text="innerModel"');
+
+            // Act
+            $scope.innerModel = 'foo';
+            $scope.$digest();
+
+            // Assert
+            expect(getInput().val()).toEqual('foo');
+        });
+    });
+
     describe('tabindex option', function() {
         it('sets the input field tab index', function() {
             // Arrange/Act