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>

score 24 · Accepted Answer · edited Feb 19 '17 at 20:48

24

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

edited Feb 19 '17 at 20:48

Chris Barr

29,851
23
95
135

answered Jul 31 '14 at 19:06

Polochon

2,199
13
13

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. – Kimchi Man Jul 31 '14 at 19:12
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 – Polochon Jul 31 '14 at 19:33
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. – Kimchi Man Jul 31 '14 at 19:45

score 0 · Answer 2 · answered Feb 15 '23 at 13:08

If someone stumbles upon this and is still looking at using a directive as the solution. We implemented something like the below. Seems to work great for all our cases

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[copyProtection]' ,
  host: {
    '[style.-webkit-touch-callout]': '"none"',
    '[style.-webkit-user-select]': '"none"',
    '[style.-khtml-user-select]': '"none"',
    '[style.-moz-user-select]': '"none"',
    '[style.-ms-user-select]': '"none"',
    '[style.user-select]': '"none"',
  }
})
export class CopyProtectionDirective {

  @HostListener('selectstart') onSelectStart() {
    return false;
  }

  constructor(private elementRef: ElementRef) { }
}

Disable text selection with Angular directive

2 Answers2

Linked