2

2015.06.01 更新

この問題はライブラリ内で解決されました - https://github.com/mbenford/ngTagsInput/pull/239

問題

ng-tags-input の on-tag-click ハンドラーはありません。ユーザーがタグをクリックして、Angular 式を介して関数呼び出しを引き出します。

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

3 に答える 3

5

ベストソリューション (2015 年 5 月)

2015 年 5 月中旬の時点で、この問題はライブラリhttps://github.com/mbenford/ngTagsInput/pull/239内で解決されました。これで、次のようなディレクティブで使用できます。

<tags-input on-tag-clicked="callback()"
于 2015-06-01T19:19:23.483 に答える
5

現在のソリューション

このソリューションは理想的ではないようですが、ディレクティブ自体に実装されたソリューションの代わりに、これが機能する唯一の方法でした:

以下が必要です。

  • 新しいタグ テンプレート
  • タグ テンプレートによって暗黙的に使用される新しいディレクティブ
  • タグクリックの処理を担当する新しいディレクティブ

注意すべき点がいくつかあります。

  • 私はコーヒースクリプトを使用しています
  • 実装ビューで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>
于 2015-04-24T15:06:55.387 に答える