Disable text selection with Angular directive

Question

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

Comments

[Kimchi Man]

I know how to do it with CSS, but my question is how to do it with Angular directive. I just want to know cause I am learning it.

[Polochon]

angular directives are usually used to modify the dom or add some feature like many jquery plugins, not bind a fonction 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) } maybe i've misunderstood your question, so sorry

[Kimchi Man]

It's totally fine! I still thank for your reply. Could you update your answer with the example code? I want to accept your answer so that people can see the code.