Angular On Select Directive

Live Demo

You have selected the following text:

You haven't yet selected any text

Bacon ipsum dolor amet ut beef ribs culpa alcatra cupidatat bacon sint dolor ipsum. Pork loin picanha nisi leberkas sausage. Pork chop consequat boudin, rump duis sausage ut cow swine ham alcatra dolor. Consectetur strip steak ham proident fugiat short loin voluptate officia boudin.

Deserunt est tongue, capicola officia short loin kielbasa corned beef in eu leberkas veniam cow ut ut. Cow sint magna, drumstick bacon turkey dolore aute ea pariatur. Esse fugiat cow anim boudin beef ribs. Aliquip esse proident, exercitation elit anim ut ball tip in beef mollit porchetta. Ea frankfurter aliquip, short loin voluptate velit reprehenderit. Nisi nostrud esse jowl alcatra.

About

Directive that allows for click-and-drag or just a click for highlighting words within any container regardless of type. The on-select attribute value is evaluated whenever a word or a group of words have been highlighted. The selection object is passed in as selection in the evaluated component.

Additionally, if auto-highlight is also present, upon selection the selected text is automatically highlighted. This is * effectively the same as calling selection.highlight(..) with some basic defaults.

If snap-to-word is present, the selected text is expanded to include whole words (including punctuation). If snap-to-word is turned on, simply clicking on a word is the same as highlighting the whole word.

Example Usage

The below example shows how to use on-select to automatically highlight a word and then after 2000ms the highlight is removed. This is actually demoed in the Live Demo selection at the top of the page.

angular.module('example', ['onSelect'])
  .controller('ExampleController', function() {
    var vm = this;
    vm.handler = handler;
    return this;

    function handler(selection) {
      setTimeout(function() {
        selection.removeHighlight();
      }, 2000);
    };
  });

<div ng-controller="ExampleController as vm">
  <div on-select="vm.handler(selection);" auto-highlight snap-to-word>
    Bacon ipsum dolor amet ut beef ribs culpa...
  </div>
</div>

Installation

$ npm install --save angular-onselect

   -- or --

$ bower install --save angular-onselect

Submitting Issues

Please file a github issue for any problems or feature requests.