我有一个数据表：
<table class="table table-hover" ng-class="dndElemClass" drag-and-drop>
...
</table>
$scope.dndElemClass = 'on-drag-enter'我的目标是通过在元素的ondragenter事件侦听器上分配给表格一个阴影：
.on-drag-enter {
-webkit-box-shadow: -3px 3px 5px 3px #ccc;
...
}
该onDragEnter指令如下：
directive('dragAndDrop', function() {
return {
restrict: 'A',
controller: function($scope) {
$scope.dndElemClass = '';
},
link: function($scope, elem, attr) {
$scope.$watch('currentFolder.canUpload', function(newValue, oldValue) {
if (newValue && Modernizr.draganddrop && window.File) {
elem[0].ondragenter = function(evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.$apply(function() {
$scope.dndElemClass = 'on-drag-enter';
});
};
elem[0].ondragleave = function(evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.$apply(function() {
$scope.dndElemClass = '';
});
};
elem[0].ondrop = function(evt) {
...
};
}
});
}
}
})
尽管$scope.dndElemClass在ondragenter和ondragleave事件侦听器中分配了值，但<table>似乎没有识别该值并分配类，因为没有出现阴影。
到目前为止，我已经测试过，如果我在指令的控制器属性中设置类，我在上面的代码中将其分配为空白，它确实可以识别该值，所以我知道它会从指令中接受它。将控制器中设置的类作为测试，如果我触发ondragenter侦听器，它将删除该类。我还确认了使用日志记录$scope.$apply()正确分配的值scope.dndElemClass，但无论出于何种原因，当在事件侦听器中设置时$scope.$apply()，表的ng-class属性将无法识别变量分配并认为它是空的。
更新：
根据 Josh 的评论，我清理了代码，这样我就不必$apply在事件侦听器回调中分配变量。
directive('dragAndDrop', function() {
return {
restrict: 'A',
controller: function($scope) {
$scope.dndElemClass = '';
},
link: function($scope, elem, attr) {
$scope.$watch('currentFolder.canUpload', function(newValue, oldValue) {
if (newValue && Modernizr.draganddrop && window.File) {
elem.bind('dragenter', function(evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.dndElemClass = 'on-drag-enter';
});
elem.bind('dragleave', function(evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.dndElemClass = '';
});
elem.bind('drop', function(evt) {
//...
});
}
});
}
}
})
仍然没有运气。我可以验证它正在执行带有日志记录的回调，但没有运气让变量分配被表的ng-class属性识别。
更新2：阅读AngularJS关于 ngClass 的文档 后，我更加困惑。对我来说，我认为这就像将您想要的类的名称（s in a array）设置为当前控制器（或者在我的情况下，指令的）中的变量一样简单$scope，然后像在任何地方一样指定该变量的名称else 在元素的ng-class=""属性中。但正如我正在阅读的那样，当人们使用表达式或切换类名时，它似乎要复杂得多。
使用切换的想法，我分叉了我的 plunker，$scope.dndElemClass根据用户是否触发dragenter或dragleave. 我还包括$scope.$apply()了很好的衡量标准，因为我发现我不了解angular.bind()over .addEventListeneror的优势.ondragenter = function() {};。无论如何，这一切都没有导致表的类像我期望的那样被设置。
