2

更新 2015.06.01

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

问题

ng-tags-input 没有 on-tag-click 处理程序，因此用户单击标签以通过角度表达式引发函数调用：

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

3 回答 3

5

当前解决方案

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

这个需要：

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

需要注意的几点：

  • 我正在使用咖啡脚本
  • 我在实现视图中使用控制器作为语法

标签模板

这是直接从有关创建自定义标签模板的项目文档中借用和修改的

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

on-tag-click 指令

.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>
于 2015-04-24T15:06:55.387 回答
5

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

截至 2015 年 5 月中旬，此问题已在库https://github.com/mbenford/ngTagsInput/pull/239中得到解决。现在您可以将它与指令一起使用，如下所示：

<tags-input on-tag-clicked="callback()"
于 2015-06-01T19:19:23.483 回答
1

@jusopi：感谢您的出色回答，我是一个有角度的初学者，如果没有您的帮助，我永远不会知道这是如何工作的。我将您的指令翻译成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);
                    };
                }
        };
    }
);

on-tag-click 指令

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
                            });
                        });
                }
        };
    }
]);
于 2015-05-30T13:05:30.763 回答