Question

157

Disable text selection with Angular directive

rated 0 times [ 159] [ 2] / answers: 1 / hits: 12006 / 10 Years ago, thu, july 31, 2014, 12:00:00

I am learning JavaScript and AngularJS.

I want to disable text selection with Angular Directive.

I have a JavaScript code for that function:

function clearSelection() {

    if(document.selection && document.selection.empty) {

        document.selection.empty();

    }

    else if(window.getSelection) {

        var sel = window.getSelection();

        sel.removeAllRanges();

    }

};

And I am working on the directive, but don't know how to add that function to the directive.

Directive:

...

.directive('disableTextSelection', function() {

    return {

        link: function($scope, $element, $attrs) {

            // Something here..

        }

    }

}

...

And I want to do this in HTML like:

<table disable-text-selection>

    ...

</table>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

andreguym

Add To Favorites

Follow

Total Points: 125

Total Questions: 112

Total Answers: 103

Location: Wallis and Futuna

Member since Tue, Mar 30, 2021

3 Years ago

andreguym questions

1 Cant run cypress tests in Chrome & Edge browsers(being manageed by organization)

Sun, Dec 5, 21, 00:00, 3 Years ago

1 Bootstrap5 modal not showing

Fri, May 14, 21, 00:00, 3 Years ago

1 Kick/disconnect someone from voice chat in discord

Sun, Apr 4, 21, 00:00, 3 Years ago

1 TypeError(Super expression must either be null or a function) - when App is a class instead of a function

Sat, Apr 3, 21, 00:00, 3 Years ago

1 tooltip to work for mouse hover and click both - ngbootstrap

Wed, Mar 17, 21, 00:00, 3 Years ago

View All

answered 10 Years ago austenjordang · Accepted Answer

AngularJS and more globally JavaScript are not the good thing to do that.

You should use a CSS property like this one

.disable-text-selection {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

EDIT

Angular directives are usually used to modify the DOM or add some features like many jQuery plugins, not bind a function to a DOMnode (or use ng-click in this case).

Your function can clear a selection on IE but you must bind an event to active it.

Anyway, in your case you should use the second parameter provided in the link function (called after compile and all controllers declarations) and bind it to your function calling.

link: function($scope, $element, $attrs) { 

    $element.bind('click', clearSelection) 

}