From aa8d190b6edc705f89d407cf65a8ca6266238616 Mon Sep 17 00:00:00 2001
From: Ofir Kerker <ofir@codota.com>
Date: Wed, 10 Sep 2014 10:42:27 +0300
Subject: [PATCH] feat(tagsInput): Add onTagClicked callback

Add an option for the user to set a callback to be called when a tag is
clicked. The current tag is passed as $tag.
---
 src/tags-input.js         | 10 +++++++++-
 templates/tags-input.html |  3 ++-
 test/tags-input.spec.js   | 28 ++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/tags-input.js b/src/tags-input.js
index 2e427207..f768251e 100644
--- a/src/tags-input.js
+++ b/src/tags-input.js
@@ -44,6 +44,7 @@
  *    is available as $tag. This method must return either true or false. If false, the tag will not be removed.
  * @param {expression=} [onTagRemoved=NA] Expression to evaluate upon removing an existing tag. The removed tag is
  *    available as $tag.
+ * @param {expression=} [onTagClicked=NA] Expression to evaluate upon clicking an existing tag. The clicked tag is available as $tag.
  */
 tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInputConfig, tiUtil) {
     function TagList(options, events, onTagAdding, onTagRemoving) {
@@ -154,7 +155,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu
             onTagAdded: '&',
             onInvalidTag: '&',
             onTagRemoving: '&',
-            onTagRemoved: '&'
+            onTagRemoved: '&',
+            onTagClicked: '&'
         },
         replace: false,
         transclude: true,
@@ -329,6 +331,11 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu
                         }
                         input[0].focus();
                     }
+                },
+                tag: {
+                    click: function(tag) {
+                        events.trigger('tag-clicked', { $tag: tag });
+                    }
                 }
             };
 
@@ -336,6 +343,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu
                 .on('tag-added', scope.onTagAdded)
                 .on('invalid-tag', scope.onInvalidTag)
                 .on('tag-removed', scope.onTagRemoved)
+                .on('tag-clicked', scope.onTagClicked)
                 .on('tag-added', function() {
                     scope.newTag.setText('');
                 })
diff --git a/templates/tags-input.html b/templates/tags-input.html
index 0e5a1e92..1f1607c0 100644
--- a/templates/tags-input.html
+++ b/templates/tags-input.html
@@ -3,7 +3,8 @@
     <ul class="tag-list">
       <li class="tag-item"
           ng-repeat="tag in tagList.items track by track(tag)"
-          ng-class="{ selected: tag == tagList.selected }">
+          ng-class="{ selected: tag == tagList.selected }"
+          ng-click="eventHandlers.tag.click(tag)">
         <ti-tag-item data="tag"></ti-tag-item>
       </li>
     </ul>
diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
index 62e033d0..76d56e76 100644
--- a/test/tags-input.spec.js
+++ b/test/tags-input.spec.js
@@ -1722,6 +1722,34 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('on-tag-clicked option', function() {
+        it('calls the provided callback when a tag is clicked', function() {
+            // Arrange
+            $scope.tags = generateTags(3);
+            $scope.callback = jasmine.createSpy();
+            compile('on-tag-clicked="callback($tag)"');
+
+            // Act
+            getTag(1).click();
+
+            // Assert
+            expect($scope.callback).toHaveBeenCalledWith({ text: 'Tag2' });
+        });
+
+        it('doesn\'t call the provided callback when the remove button is clicked', function() {
+            // Arrange
+            $scope.tags = generateTags(3);
+            $scope.callback = jasmine.createSpy();
+            compile('on-tag-clicked="callback($tag)"');
+
+            // Act
+            getRemoveButton(1).click();
+
+            // Assert
+            expect($scope.callback).not.toHaveBeenCalled();
+        });
+    });
+
     describe('ng-disabled support', function () {
         it('disables the inner input element', function () {
             // Arrange/Act