Question

我想要一个指令，根据搜索字符串突出显示元素中的文本。

大多数可用的解决方案使用过滤器而不是指令，并使用如下：

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

这是example

我宁愿使用指令而不是过滤器，因为我不喜欢必须将元素的内容放在ng-html-bind属性中。我觉得元素的内容应该在其中。

无论如何，我为此编写了I指令但是想知道是否有更好的方法来编写它。我觉得这不是最有效的方法。这是fiddle。请注意，<code>元素中的文本未突出显示。这是因为.contents（）仅返回元素的直接子节点和文本节点。除非有一种非常简单的方法来递归每个子元素的内容，否则这种行为很好。

提前致谢。

Answer 1

对于遍历每个子元素的内容，可以使用递归。将代码添加到荧光笔中并将highlighterd移除到函数中，并为每个子元素调用这些函数。

.contents（）返回一个Jquery对象。如果node.nodeType === 1将其转换为角度元素，并再次调用其上的contents（）。

        /*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。

Angular JS文本荧光笔指令

1 个答案: