ng-tags-input on-tag-click handler:有更好的方法吗？

Question

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

• project的github 页面

Answer 1

当前解决方案

这个解决方案看起来并不理想,但是代替在指令本身实现的解决方案,这是我让它工作的唯一方法:

这个需要:

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

有几点需要注意:

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

标签模板

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

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

Answer 2

最佳解决方案(2015年5月)

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

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