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.
mbenford · May 21, 2015 · aa8d190 · aa8d190
1 parent b5dc57f
commit aa8d190
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git 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,13 +331,19 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu
                         }
                         input[0].focus();
                     }
+                },
+                tag: {
+                    click: function(tag) {
+                        events.trigger('tag-clicked', { $tag: tag });
+                    }
                 }
             };
 
             events
                 .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
@@ -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
@@ -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