更改 angularjs 指令 link 函数中的元素 class

Question

我正在尝试使用 Angularjs 中的自定义指令设置一个简单的 drag/drop 界面。我正在处理从该站点和其他站点收集的大量样本，这一切看起来相当简单，但并不完全有效。具体来说，我正在尝试实现一个 '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 class:

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

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

Answer 1

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

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

更改 angularjs 指令 link 函数中的元素 class

Change element class in angularjs directive link function

javascript

angularjs

drag-and-drop