我在同一页面中有多个textAngular字段和常用工具栏,我创建了一个指令,可以在当前插入位置的textAngular字段中自动插入一些文本。现在的问题是,当只有一个textAngular字段时,我可以插入代码。但是有多个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
指令采用插入选项和要插入值的textangular字段名称。我想支持在多个textAngular字段中插入,具体取决于当前的插入位置。