Reference paragraphs within yourself
I am trying to highlight text on my existing pages. these pages are neatly constructed like
<p>some text</p>
<p>some more text</p>
etc.
now I put an input field where all the text inside it is highlighting the text on the page:
<input ng-model='highlightthis'>
I created a filter in angular application like this:
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)
}
});
and quick style:
<style>.highlighted { background: yellow; } </style>
now .. I thought I needed to add a filter to everything <p>
on my existing pages. but I can't seem to find the correct syntax for it:
<p ng-bind-html="$(this).innerHTML | highlight:highlightthis>some text</p>
etc.
but that won't work. has anyone figured out how to associate inner text with <p>
with a filter? Also, maybe there is some clever way to add ng-bind to all <p>
on page load instead of manually adding it to all p on pages .. any hints would be greatly appreciated :)
source to share
You cannot use a filter as you are not using data interpolation with the ngBind
tags directive {{}}
. In this case, you will probably be using a directive. A very simple one might look like this:
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);
}
});
}
};
});
and is used like:
<p highlight>some text</p>
<p highlight>some more text</p>
Demo: http://plnkr.co/edit/Ee9efFhXzDabryH1WBlU?p=preview
Of course, it is not very advanced and easy to use, but you can get an idea of how you can write something like what you want.
UPD . Here's a more convenient example of the hightlight directive:
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);
});
}
});
}
};
});
which should be used like this:
<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>
Demo: http://plnkr.co/edit/6jG1fXVayZYOVhGCqrjl?p=preview
source to share