如何在選擇後將提及包裹在特殊的span標籤中？像Facebook或Stackoverflow標籤

Question

正在使用ment.io AngularJS插件，允許使用提及。

但我無法找出如何改變選定提及的外觀和感覺。

例如， in 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. 我需要標記的div會像textarea的或輸入文本作爲contenteditable

3. 對於任何奇怪的跨度我想要做的，我需要改變這個函數a ccordingly

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