使用Angular指令禁用文本选择

Question

我正在学习JavaScript和AngularJS.

我想用Angular Directive禁用文本选择.

我有一个该函数的JavaScript代码:

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    }
    else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
};

我正在处理该指令,但不知道如何将该函数添加到指令中.

指示:

...
.directive('disableTextSelection', function() {
    return {
        link: function($scope, $element, $attrs) {
            // Something here..
        }
    }
}
...

我想在HTML中这样做:

<table disable-text-selection>
    ...
</table>

Answer 1

AngularJS和更多全局JavaScript并不是一件好事.

你应该使用像这样的CSS属性

.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;
}

编辑

Angular指令通常用于修改DOM或添加一些功能,如许多jQuery插件,而不是将函数绑定到DOMnode(或ng-click在这种情况下使用).

您的函数可以清除IE上的选择,但您必须绑定一个事件才能激活它.

无论如何,在您的情况下,您应该使用链接函数中提供的第二个参数(在编译和所有控制器声明之后调用)并将其绑定到函数调用.

link: function($scope, $element, $attrs) { 
    $element.bind('click', clearSelection) 
}