javascript - 在angularjs指令链接函数中更改元素类

Question

我正在尝试使用 Angularjs 中的自定义指令设置一个简单的拖放界面。我正在处理从该站点和其他站点收集的大量样本，这一切看起来相当简单，但并不完全有效。具体来说，我正在尝试实现一个“dragenter”处理程序，当拖动的元素经过它时，它将改变放置目标的外观。首先，我将展示我正在使用的 HTML:

    <div cstyle="width: 900px; height: 600px; border: 1px solid #999">
        <div id="draggable" ses-draggable style="width: 200px; height: 150px; background-color: #777">Drag Me!</div>
        <div id="dropTarg1" ses-drop-target style="width: 100px; height: 100px; border: 1px solid #888; background-color: #aaa">Drop target 1</div>
        <div id="dropTarg2" ses-drop-target style="width: 100px; height: 100px; border: 1px solid #888; background-color: #aaa">Drop target 2</div>
        <div id="dropTarg3" ses-drop-target style="width: 100px; height: 100px; border: 1px solid #888; background-color: #aaa">Drop target 3</div>
    </div>

这是两个指令的代码:

ems2App.directive('sesDraggable', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            angular.element(elem).attr("draggable", "true");
        }
    };
});

ems2App.directive('sesDropTarget', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('dragenter', function (e) {
                angular.element(e.target).addClass('divDragOver');
            });
            elem.bind('dragleave', function (e) {
                angular.element(e.target).removeClass('divDragOver');
            });
        }
    };
});

这是 divDragOver 类:

.divDragOver {
    border: 3px solid black;
    background-color: green;
}

只要当拖动的元素悬停在其中一个放置目标上时正确调用该函数，这一切都可以正常工作，但是类更改不会显示在浏览器上。浏览器控制台中没有显示任何内容，因此不会抛出任何错误，只是不会更改放置目标元素的外观。

Answer 1

如果您使用的 HTML 与帖子中的完全相同，那么您看不到样式更改的原因仅仅是 CSS。标记中的元素使用一些内联样式定义，这些样式将优先于类中定义的任何样式(没有 !important)。所以你的类可能应用正确，但显示的边框和背景仍然是优先级更高的，它们是内联定义的。

如果您删除内联样式并改为使用 CSS 类，只要 divDragOver 类优先于您定义的新类，它就会按预期工作。为此，在定义 divDragOver 类之前定义新类就足够了。