CODEWITHSUNDEEP
angularjs-directiveng-tags-input
jusopi
jusopi

Reputation: 6813

ng-tags-input on-tag-click handler: is there a better way?

update 2015.06.01

This issue was resolved within the library - https://github.com/mbenford/ngTagsInput/pull/239

problem

There is no on-tag-click handler for the ng-tags-input such that a user clicks on a tag to elicit a function call via an angular expression:

<!-- does not exist -->
<tags-input on-tag-click="handleTagClick(data)"></tags-input>

Upvotes: 2

Views: 3944

Answers (3)

jusopi
jusopi

Reputation: 6813

best solution (May 2015)

As of mid-May 2015, this issue was resolved within the library https://github.com/mbenford/ngTagsInput/pull/239. Now you can use it with the directive like so:

<tags-input on-tag-clicked="callback()"

Upvotes: 5

user1383029
user1383029

Reputation: 2125

@jusopi: Thank you for this great answer, i`m an angular beginner and would have never found out how this works without your help. I translated your directives to javascript, maybe this helps somebody who is like me not using coffeescript:

implicit tag directive

my_app.directive('nxTag', 
    function() {
        return {
            restrict: 'AC',
            link: 
                function($scope, elem, attrs) {
                    $scope.$tagClicked = function(data) {
                        return $scope.$emit('nxTag.clicked', data);
                    };
                }
        };
    }
);

on-tag-click directive

my_app.directive('onTagClick', ['$parse', 
    function($parse) {
        return {
            link: 
                function($scope, elem, attrs) {
                    var clickFunc;
                    clickFunc = attrs.onTagClick ? $parse(attrs.onTagClick) : angular.noop;
                    return $scope.$on(
                        'nxTag.clicked', 
                        function(evt, tagData) {
                            evt.preventDefault();
                            evt.stopPropagation();
                            return clickFunc($scope, {
                                data: tagData
                            });
                        });
                }
        };
    }
]);

Upvotes: 1

jusopi
jusopi

Reputation: 6813

current solution

This solution doesn't seem ideal, but in lieu of a solution implemented in the directive itself, this was the only way I got it to work:

It requires:

  • a new tag template
  • a new directive that is implicitly used by the tag template
  • a new directive responsible for handling the tag click

A few things to note:

  • I'm using coffeescript
  • I'm using controller-as syntax in my implementing view

tag template

This is borrowed and modified straight from the project's documentation on creating custom tag templates

<div nx-tag class="tag-template">
   <div>
      <a href="" tabindex="-1" ng-click="$tagClicked(data)"><span>{{$getDisplayText()}}</span></a>
      <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
   </div>
</div>

implicit tag directive

If you notice in the above template, I am using nx-tag, I'm creating the $tagClicked function there. 

.directive 'nxTag', ->
    {
        restrict: 'AC'
        link: ($scope, elem, attrs)->
            $scope.$tagClicked = (data)->
                $scope.$emit 'nxTag.clicked', data
    }

on-tag-click directive

.directive 'onTagClick', ($parse)->
    {
        link: ($scope, elem, attrs)->
            clickFunc = if attrs.onTagClick then $parse attrs.onTagClick else angular.noop

            $scope.$on 'nxTag.clicked', (evt, tagData)->
                evt.preventDefault()
                evt.stopPropagation()

                clickFunc $scope, {data: tagData}
    }

implementing

<tags-input ng-model="vc.viewData.tags" template="nx-tag-item.html" 
   on-tag-removed="vc.save()" on-tag-added="vc.save()" 
   on-tag-click="vc._test(data)">

   <auto-complete source="vc.getTags($query)"></auto-complete>

</tags-input>

Upvotes: 5

Related Questions