Highlight

The highlight directive allows you to highlight text within DOM elements. When you set the bb-highlight attribute to the text you want to highlight, it highlights all matching text within the element.

Highlight settings

  • bb-highlight — Specifies the text to highlight.
  • bb-highlight-beacon(Optional.) Specifies a property on your scope that prompts highlighting when its value changes. This is necessary for scenarios where the highlight directive cannot detect changes to the content of the element to highlight. For example, if another directive updates the content or the bb-highlight attribute is specified on a parent element, then you need bb-highlight-beacon to prompt the highlight directive to update the highlighted text. You do not need bb-highlight-beacon if the element with the bb-highlight attribute has the ng-bind attribute because the highlight directive can detect this and update the highlighting when the value changes.

Demo


The text that you enter is highlighted here.
This additional content is highlighted too!

Markup

<div ng-controller="HighlightTestController as highCtrl">
  <div class="tile-form">
    <div class="input-group">
      <label for="highlight-text-input-{{$id}}" class="control-label">
        Enter text to highlight:
      </label>
      <br />
      <input id="highlight-text-input-{{$id}}" class="form-control" ng-model="highCtrl.highlightText" />
    </div>
    <div class="clearfix"></div>
      <p></p>
    <div class="input-group">
      <label>
        <input type="checkbox" bb-check ng-model="highCtrl.showAdditionalContent" /> Display additional content
      </label>
    </div>
    <div class="clearfix"></div>
    <div bb-highlight="highCtrl.highlightText" bb-highlight-beacon="highCtrl.showAdditionalContent">
      The text that you enter is highlighted here.
      <div ng-if="highCtrl.showAdditionalContent">
        This additional content is highlighted too!
      </div>
    </div>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function HighlightTestController() {
        var self = this;
        self.highlightText = '';
    }

    angular.module('stache').controller('HighlightTestController', HighlightTestController);
}());