ng-tags-input on-tag-click 处理程序：有更好的方法吗？

Question

更新2015.06.01

此问题已在库中解决 - https://github.com/mbenford/ngTagsInput/pull/239

问题

ng-tags-input 没有标签点击处理程序，因此用户点击标签可通过 angular 表达式引发函数调用：

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

• 项目的githubpages

Answer 1

当前解决方案

这个解决方案似乎并不理想，但代替在指令本身中实施的解决方案，这是我让它工作的唯一方法：

需要：

• 一个新的标签模板
• 标记模板隐式使用的新指令
• 负责处理标签点击的新指令

注意几点：

• 我正在使用 coffeescript
• 我在我的实现视图中使用 controller-as 语法

标签模板

这是直接从 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>

隐式标记指令

如果您在上面的模板中注意到，我正在使用 nx-tag，我正在那里创建 $tagClicked 函数。

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

标签点击指令

.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}
    }

实施

<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>

Answer 2

@jusopi: 感谢您的出色回答，我是 angular 初学者，如果没有您的帮助，我永远不会知道这是如何工作的。我将您的指令翻译成 javascript，也许这可以帮助像我一样不使用 coffeescript 的人：

隐式标记指令

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

标签点击指令

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
                            });
                        });
                }
        };
    }
]);

Answer 3

最佳解决方案（2015 年 5 月）

截至 2015 年 5 月中旬，此问题已在图书馆内得到解决 https://github.com/mbenford/ngTagsInput/pull/239。现在您可以像这样将它与指令一起使用：

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