選擇后如何將提及內容包裝在特殊的跨度標簽中？ 像Facebook或Stackoverflow標簽

Question

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

但是我無法找出如何更改所選內容的外觀。

例如在Stackoverflow

例如在Facebook

Answer 1

我意識到關鍵是

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 } }; }]) 

2. 我需要將看起來像textarea或輸入文本的div標記為contenteditable

3. 對於我想做的任何奇怪的跨度，我都需要相應地更改此功能

    $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>'; };