1

私は自分自身の指令でネストされた指令としてタグ入力を使用しています。私はこのような私のディレクティブの属性として任意のインデックスを渡したい:タグインプットノードモジュールをネストされたディレクティブとして使用する場合、tabindexをタグ入力ノードモジュールに渡すにはどうすればいいですか?

<dp-tags dp-tabindex="3" ng-model="vm.cityModel.dpTags" load="vm.loadTagts" display-field="title"></dp-tags> 

これは、入力がそれで実施しているタグ私のディレクティブのテンプレートを呼び出します。

scope: { 
     'load': '&', 
     'placeHolder': '@', 
     'serverErr': '=', 
     'pattern': '@', 
     'displayField': '@', 
     'tagTemplate':'@', 
     'autoCompleteTemplate':'@', 
     'dpTagLabel':'@', 
     editDisabled:'@', 
     dpTabindex: '=' 
    }, 

と、このように私の指示でタグの入力::私はここに関連する一部 置くように私はまた私のディレクティブを設定してい

<tags-input type="text" 
        tabindex="{{dpTabindex}}" 
        allowed-tags-pattern="{{pattern}}" 
        on-tag-adding="checkTag($tag)" 
        display-property="{{displayField}}" 
        name="tags1" 
        class="" 
        ng-required="false" 
        ng-model="internalTag" 
        placeholder="{{placeHolder}}" 
        template="{{tagTemplate}}" 
        add-on-comma="false" 
        min-length="2" 
        ng-disabled="editDisabled" 
     > 
      <auto-complete source="load()($query)" template="{{autoCompleteTemplate}}" min-length="2"></auto-complete> 
     </tags-input> 

をしかし、これはのようにどこに動作しません。私の他のディレクティブ(select/textfieldのテンプレート)私はこのメソッドに問題はありません。この問題を解決する手助けができたら本当に感謝しています。おかげさまで

答えて

1

私は解決策に達しました! 私はkeydownのリスナーを入れてから、のタブキーに当たった回数を数えます。カウンタ(scope.indexOfTab)がtags-inputディレクティブに設定したtabindexと等しくなると、関連するタグがタグ入力($('tags-input div'))にフォーカスするようになり、入力フィールドをinspectして見つけたフォーカス方式:

link(scope, elm, attr, ngModel) { 
    scope.indexOfTab = 0; 
    scope.keydown = $(document).on("keydown", function (e) { 
     if ((e.keyCode || e.which) == 9) { 
      scope.indexOfTab = scope.indexOfTab + 1; 
       if (scope.indexOfTab == scope.dpTabindex) { 
        $('tags-input div').focus(); 
       } 
       console.log("scope.indexOfTab: " + scope.indexOfTab); 
     } 
    }); 
} 
関連する問題