选择后如何将提及包裹在特殊的 span 标签中？喜欢 Facebook 或 Stackoverflow 标签

Question

我正在使用 ment.io 允许使用提及的 AngularJS 插件。

但我无法找到如何更改所选提及项的外观。

例如在计算器中

例如在Facebook

Answer 1

我意识到关键是

我必须有以下指令：

.directive('contenteditable', ['$sce', function($sce) { 

return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
        function read() {
            var html = element.html();
            // When we clear the content editable the browser 
            // leaves a <br> behind 
            // If strip-br attribute is provided then we strip this out
            if (attrs.stripBr && html === '<br>') {
                html = '';
            }
            ngModel.$setViewValue(html);
        }


        if(!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
            if (ngModel.$viewValue !== element.html()) {
                element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
            }
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
            scope.$apply(read);
        });
        read(); // initialize
    }
};

}])

我需要将看起来像文本区域或输入文本的 div 标记为 contenteditable

无论我想做什么奇怪的跨度，我都需要相应地改变这个功能

$scope.getPeopleText = function(item) {
    // note item.label is sent when the typedText wasn't found
    return '<span class="menu-highlighted">' + (item.name || item.label) + '</span>';
};

选择后如何将提及包裹在特殊的 span 标签中？喜欢 Facebook 或 Stackoverflow 标签

How to wrap the mention in a special span tag after selecting it? Like Facebook or Stackoverflow tags

javascript

html

angularjs

mention