引用自身内部的段落答案

【问题标题】：reference paragraphs inside itself引用自身内部的段落
【发布时间】：2015-02-13 11:57:11
【问题描述】：

我正在尝试突出显示现有页面中的文本。这些页面都构建得像

<p>some text</p>
<p>some more text</p>

等等。

现在我放了一个输入框，里面的所有文本都会突出显示页面上的文本：

<input ng-model='highlightthis'>

我在 Angular 应用程序中构建了一个过滤器，如下所示：

app.filter('highlight', function($sce) {
  return function(text, phrase) {
   if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
     '<span class="highlighted">$1</span>')
   return $sce.trustAsHtml(text)
  }
});

还有一个快速的样式：

<style>.highlighted { background: yellow; } </style>

现在.. 我认为我需要做的就是将过滤器添加到我现有页面中的所有<p>。但我似乎找不到合适的语法：

<p ng-bind-html="$(this).innerHTML | highlight:highlightthis>some text</p>

等等。

但它不起作用。有人知道如何将<p> 的内部文本链接到过滤器吗？此外，可能有一些聪明的方法可以在页面加载时将 ng-bind 添加到所有<p>，而不是手动将其添加到页面上的所有 p 中。任何提示将不胜感激:)

【问题讨论】：

最好使用编辑器顶部的代码格式{}，而不是内联的```代码块，这样你就得到了正确的格式。

标签： angularjs filter highlight

【解决方案1】：

您不能使用过滤器，因为您没有使用带有{{}} 标签的ngBind 指令的数据插值。在这种情况下，您可能会使用指令。一个非常简单的样子：

app.directive('highlight', function() {
    return {
        link: function(scope, element) {
            scope.$watch('highlightthis', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                   var text = element.text().replace(new RegExp('(' + newVal + ')', 'gi'), '<span class="highlighted">$1</span>');
                    element.html(text); 
                }  
            });
        }
    };
});

并像这样使用：

<p highlight>some text</p>
<p highlight>some more text</p>

演示：http://plnkr.co/edit/Ee9efFhXzDabryH1WBlU?p=preview

当然它使用起来不是很高级和方便，但你可以了解如何编写你需要的东西。

UPD。这是一个更方便的高亮指令示例：

app.directive('highlight', function() {
    return {
        link: function(scope, element, attr) {
            var tags = element[0].querySelectorAll('.highlightable');
            scope.$watch(attr.highlight, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    angular.forEach(tags, function(tag) {
                        var el = angular.element(tag),
                            text = el.text().replace(new RegExp('(' + newVal + ')', 'gi'), '<span class="highlighted">$1</span>');
                        el.html(text);
                    });

                }  
            });
        }
    };
});

应该这样使用：

<body ng-controller="MainCtrl" highlight="highlightthis">

    <input ng-model='highlightthis'> {{highlightthis}}

    <p class="highlightable">some text</p>
    <p class="highlightable">some more text</p>
    <p>This content is not highlightable.</p>
    <p>but this is again.</p>

</body>

演示：http://plnkr.co/edit/6jG1fXVayZYOVhGCqrjl?p=preview

【讨论】：

如果我理解正确的话，“方便”和“不方便”的方式都会关注输入模型。第一个只搜索整个页面的所有内容，下一个只搜索具有特定类集的对象。那是对的吗？关键是，我用 $routeProvider 加载我的页面很晚，但你的解决方案给了我正确的想法。
我现在有这个：` $http.get("partials/blogs.json").then(function(ret) { $scope.blogs=ret.data; $scope.$watch( “q”，函数（newVal，oldVal）{ if (newVal !== oldVal) { tags=document.querySelectorAll('.HL'); angular.forEach(tags, function(tag) { var el = angular.element( tag), text = el.text().replace(new RegExp('(' + newVal + ')','gi'), '$1'); el. html(文本); }); } }); `
不确定 $watch 应该在 $http 内部还是外部。我认为两者都应该工作，但我不确定哪个更适合浏览器资源......