CODEWITHSUNDEEP
angularjshighlightintervalswatch
Kamila Rywelska
Kamila Rywelska

Reputation: 25

Angular $watch event isn't firing on change in window.getSelection().anchorNode

I watch for changes in user highlighted text. I trigger base on DOM element being highlighted. I have the following function:

$scope.$watch(function(scope) { return window.getSelection().anchorNode }, function() { console.log(window.getSelection().anchorNode; }

It only fires once when the page loads and never again, regardless of what text I highlight. I highlight text in various spans, text areas on page, and this doesn't fire.

if I add $interval function that does NOTHING, this watch does fire when selection changes after the interval time.

Any ideas ?

Upvotes: 0

Views: 366

Answers (1)

Domas Mar
Domas Mar

Reputation: 1186

In your instance $watch won't work because no $scope variable is being updated and $digest cycle won't start.

You can try use ngMouseup directive to get last highlighted text and save it.

HTML:

<div ng-mouseup="updateHighlightedText()">lots of text</div>

JS:

$scope.updateHighlightedText = function () {
    $scope.highlightedText = window.getSelection().toString();
}

Here is working example in jsfiddle

Upvotes: 1

Related Questions