我试图突出显示现有页面中的文字。这些页面都像
一样整齐地构建<p>some text</p>
<p>some more text</p>
等..
现在我输入一个输入框，其中的所有文本都会突出显示页面上的文字：
<input ng-model='highlightthis'>
我在角度应用程序中构建了一个过滤器，如下所示：
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>上，而不是手动将其添加到页面上的所有页面上。任何提示将不胜感激:)）
答案 0 :(得分：2)
您不能使用过滤器，因为您没有使用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>
并使用如下：
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);
});
}
});
}
};
});
当然它不是非常先进和方便使用，但你可以了解如何编写你需要的东西。
<强> UPD 即可。这是hightlight指令的更方便的例子：
<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>
应该以这种方式使用：
{{1}}