각도 JS 텍스트 형광펜 지침

Question

검색 문자열을 기반으로 요소의 텍스트를 강조 표시하기를 원했습니다.

가능한 솔루션의 대부분은 지시어 대신 필터를 사용하여 다음과 같이 사용됩니다

여기

<div ng-html-bind-unsafe="This is the contents for this div | highlight:highlightText"></div> 

가 '차라리 필터보다 지시문을 사용 example

내가 돈 때문이다 ng-html-bind 속성에 요소의 내용을 넣어야한다는 생각을 좋아합니다. 나는 요소의 내용이 그 안에 있어야한다고 느낍니다.

어쨌든 나는이 지시어를 썼다. 그러나 더 좋은 방법이 있는지 궁금해하고 있었다. 나는 그것이 가장 효율적인 방법이 아닌 것처럼 느낍니다. 다음은 fiddle입니다. <code> 요소 내의 텍스트는 강조 표시되지 않습니다. 이는 .contents()가 요소의 직접 자식 노드와 텍스트 노드 만 반환하기 때문입니다. 이 동작은 각 하위 요소의 내용을 통해 매우 간단한 방법을 반복하지 않는 한 괜찮습니다.

미리 감사드립니다.

Answer 1

각 하위 요소의 내용을 탐색 할 때 재귀를 사용할 수 있습니다. 형광펜을 추가하고 highlighterd를 함수에 추가하는 코드를 입력하고 각 하위 요소에 대해 이러한 함수를 호출하십시오.

.contents()는 Jquery 객체를 반환합니다. node.nodeType === 1 인 경우 각도 요소로 변환하고 내용()을 다시 호출하십시오.

 /*Function to add Highlighters*/ 
     scope.addHighlight = function (elm, value) { 
      angular.forEach(elm.contents(), function (node) { 
       if (node.nodeType === 3 && scope.needle.test(node.nodeValue)) { 
        node = angular.element(node); 
        node.after(node[0].nodeValue.replace(scope.needle, '<span class="highlight">$1</span>')).remove(); 

       } else if (node.nodeType === 1) { 
        node = angular.element(node); 
        if (node.contents().length > 0) scope.addHighlight(node, value); 
       } 
      }); 
     } 
     /*Function to remove current Highlighters*/ 
     scope.removeHighlight = function (elm, value) { 
      angular.forEach(elm.contents(), function (node) { 
       nodetype = node.nodeType; 
       node = angular.element(node); 
       if (node[0].nodeName === 'SPAN' && node.hasClass('highlight')) { 
        node.after(node.html()).remove(); 
        elm[0].normalize(); 
       } 

       if (node.children().length > 0 && nodetype === 1) scope.removeHighlight(node, value); 

      }); 
     } 

다음은 업데이트 fiddle입니다.