2

共通のツールバーを使用して同じページに複数の textAngular フィールドがあり、現在のキャレット位置の textAngular フィールドにテキストを自動挿入するディレクティブを作成しました。問題は、textAngular フィールドが 1 つしかないときにコードを挿入できることです。しかし、複数の textAngular フィールドがあるため、フォーカスされている textAngular フィールドを見つけることができません。これが私のコードです:

HTML

<div class="row mrgn20">
    <div class="formFld">
        <text-angular name="message" ta-target-toolbars="messageToolbar" ng-model="composeEmail.body"></text-angular>
        <text-angular name="emailSignature" ta-target-toolbars="messageToolbar" ng-model="composeEmailCtrl.emailSignature.text"></text-angular>
        <text-angular-toolbar ta-toolbar="[['uploadAttachment','bold','italics', 'ul', 'insertLink', 'fontSize', 'uploadImage', 'fontColor']]" class="toolbar" name="messageToolbar"></text-angular-toolbar>
    </div>
    <auto-insert-text options="composeEmailCtrl.autoInsertTextOptions" insert-in="message"></auto-insert-text>
</div>

JS

コントローラ

function ($scope){
  $scope.composeEmailCtrl = {};
  $scope.composeEmail ={};
  $scope.candidate = {
    name : 'Rahul',
    company : 'Test Company'
  }
  $scope.composeEmailCtrl.autoInsertTextOptions = [{
                title: 'candidate fullName',
                value: scope.candidate.name,
                key : 'candidate_fullname'
            }, {
                title: 'company name',
                value: scope.candidate.company,
                key : 'company_name'
   }];

}    

指令

app.directive('autoInsertText', function(textAngularManager) {
  return {
    restrict: 'E',
    template: '<span translate="insert_auto_text"></span> <span  ng-repeat="option in options"><button type="button" ng-bind="option.title" ng-click="insertText($event,option)" unselectable="on"></button></span>',
    scope: {
        options: "=",
        insertIn: "@"
    },
    link: function(scope, elem, attr) {
        var _editorScope = '';
        scope.insertText = function(event, option) {
            _editorScope = _editorScope || textAngularManager.retrieveEditor(scope.insertIn).scope;
            _editorScope.displayElements.text[0].focus();
            _editorScope.wrapSelection("insertHTML", option.value, true);
        }
    }
  };
}); 

このautoInsertTextディレクティブは、挿入オプションと、値が挿入される te​​xtangular フィールド名を受け取ります。現在のキャレット位置に応じて、複数の textAngular フィールドへの挿入をサポートしたいと考えています。

4

0 に答える 0