Изменить класс элемента в функции директивной ссылки 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; 
} 

Это все отлично работает, поскольку функция правильно вызывается, когда перетаскиваемый элемент является препаратом по одной из целей перетаскивания, однако изменение класса не отображается в браузере. Ничего не отображается в консоли браузера, поэтому ошибки не возникают, просто не меняет внешний вид элемента target drop.

Answer 1

Если вы используете точно такой же HTML-код, как и в своем посте, причина, по которой вы не видите изменения стиля, просто связана с CSS. Элементы разметки определяются с помощью некоторого встроенного стиля, и они будут иметь приоритет над любыми стилями, определенными в классе (без !important). Таким образом, ваш класс, вероятно, применяется правильно, но отображаемая граница и фон будут по-прежнему теми с более высоким приоритетом, которые определены в строке.

Если вы удалите встроенные стили и вместо этого используете классы CSS, он будет работать так, как вы ожидаете, если класс divDragOver имеет приоритет над новым, который вы определяете. Для этого достаточно определить новый класс до определения divDragOver.