Disable text selection with Angular directive

Issue

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>

Solution

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) 
}

Answered By - Polochon