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

使用Angular指令禁用文本选择

1 个答案: