我想要能够在div上呈现过滤/生成的html结果(带有角度的表情符号过滤器)的原始文本(仅适用于ASCII字符).
我的初步解决方案是
<textarea ng-model="text" ng-change="..." ng-focus="..."></textarea> <div ng-bind-html="text | myEmoticonsFilter"></div>
但是我无法使用隐藏的文字区域.此外,为此,我将无法鼠标选择文本,删除或复制/粘贴安全.
我也想到使用< div contenteditable =“true”>但不会处理ng-focus和ng-change.
有没有人对如何继续这样做有什么好处？
编辑1：这是一个jsfiddle,尝试我在做什么.到目前为止,能够替代第一次发生,但行为仍然不稳定.我正在使用一个可输入的指令进行双向数据绑定并过滤表情图案.
编辑2：关于我的声明,表示ng-focus和ng-change不会被处理,这不是真的 – ng-focus本身在< div contenteditable =“true”>只要使用ngModel声明了一个指令并设置了相应的$modelValue和$viewValue(编辑1中的jsfiddle中提供了一个示例),ng-change将会起作用.
有一个jQuery插件jquery-emojiarea可以做你所需要的,所以你只需要创建一个包装这个插件的指令,你就可以参加比赛了.因为它用emoji语法输入隐藏的textarea：smile：angular应该没有困难绑定.
这是我一起投掷的一个工作指令. http://jsfiddle.net/dboskovic/g8x8xs2t/
var app = angular.module('app',[]);
app.controller('BaseController',function ($scope) {
$scope.text = 'This is pretty awesome. :smile: :laughing:';
});
app.directive('emojiInput',function ($timeout) {
return {
restrict: 'A',require: 'ngModel',link: function ($scope,$el,$attr,ngModel) {
$.emojiarea.path = 'https://s3-us-west-1.amazonaws.com/dboskovic/jquery-emojiarea-master/packs/basic';
$.emojiarea.icons = {
':smile:': 'smile.png',':angry:': 'angry.png',':flushed:': 'flushed.png',':neckbeard:': 'neckbeard.png',':laughing:': 'laughing.png'
};
var options = $scope.$eval($attr.emojiInput);
var $wysiwyg = $($el[0]).emojiarea(options);
$wysiwyg.on('change',function () {
ngModel.$setViewValue($wysiwyg.val());
$scope.$apply();
});
ngModel.$formatters.push(function (data) {
// emojiarea doesn't have a proper destroy :( so we have to remove and rebuild
$wysiwyg.siblings('.emoji-wysiwyg-editor,.emoji-button').remove();
$timeout(function () {
$wysiwyg.emojiarea(options);
},0);
return data;
});
}
};
});
使用方法：
<textarea ng-model="text" emoji-input="{buttonLabel:'Insert Emoji',wysiwyg:true}"></textarea>
If you want the editable field to convert text like
:(as you type you’ll need to fork that jquery plugin and modify it slightly to parse input text on change as well as on init. (like,a couple lines of code)