AngularJS - 指令范围未在元素上设置 ng-class [英] AngularJS - directive scope not setting ng-class on element
问题描述
我有一个数据表:
<table class="table table-hover" ng-class="dndElemClass" drag-and-drop>
...
</table>
我的目标是通过在元素的 ondragenter 事件侦听器上分配 $scope.dndElemClass = 'on-drag-enter' 来为表格添加阴影:
My goal is to give the table a drop shadow by assigning $scope.dndElemClass = 'on-drag-enter' on the element's ondragenter event listener:
.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) {
...
};
}
});
}
}
})
尽管在 Despite assigning the value of 到目前为止，我已经测试过，如果我在指令的控制器属性中设置类，在上面的代码中将其分配为空白，它确实可以识别该值，所以我知道它会从指令中接受它.将控制器中的类设置为测试，如果我触发 Thus far I've tested that it does recognize the value if I set the class in the controller property of the directive where I have it assigned to blank in the above code, so I know it will accept it from the directive. With the class set in the controller as a test, if I trigger the 更新:根据 Josh 的评论，我清理了代码，这样我就不必在事件侦听器回调中 UPDATE:
As per Josh's comment, I cleaned up the code so that I didn't have to 仍然没有运气.我可以验证它正在执行带有日志记录的回调，但没有运气让表的 Still no luck. I can verify it is executing the callbacks with logging, but no luck on getting the variable assignment to be recognized by the table's 更新 2: 在阅读完之后，我更加困惑了AngularJS 关于 ngClass 的文档.对我来说，我认为这就像在当前控制器(或者在我的情况下，指令的) UPDATE 2: I am even more confused after reading through AngularJS's documentation on ngClass. To me, I thought it was as simple as setting the name(s in an array) of the classes you want to a variable in the current controller's (or in my case, the directive's) 使用切换的想法，我分叉了 我的 plunker 来重新创建情境设置 Using the idea of toggling, I forked my plunker to recreate the situation setting 我不确定您是否还需要答案，但我可能已经解决了您的问题. I am not sure if you still need an answer, but I might have fixed your plunk. 在 然后将 Then wrap 查看完整版以获得更清晰的图片. Check the complete plunk for a clearer picture. 这篇关于AngularJS - 指令范围未在元素上设置 ng-class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ondragenter 和 ondragleave 事件监听器中分配了 $scope.dndElemClass 的值， 似乎没有识别值并分配类，因为没有出现阴影.
$scope.dndElemClass in the ondragenter and ondragleave event listeners, the <table> doesn't appear to be recognizing the value and assigning the class as no dropshadow appears.ondragenter 侦听器，它将删除该类.我还确认 $scope.$apply() 正确分配了 scope.dndElemClass 的值，并带有日志记录，但无论出于何种原因，在事件中设置时listeners 的 $scope.$apply()，表的 ng-class 属性不会识别变量赋值并认为它是空的.ondragenter listener, it removes the class. I've also confirmed that the $scope.$apply() is properly assigning the value of scope.dndElemClass with logging, but for whatever reason, when set in the event listeners's $scope.$apply(), the table's ng-class attribute won't recognize the variable assignment and thinks it's empty.$apply 分配变量.$apply the variable assignment in the event listener callbacks.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 属性识别变量分配.ng-class attribute.$scope 中将您想要的类的名称(在数组中)设置为一个变量一样简单，然后像在元素的 ng-class="" 属性中的任何其他地方一样指定该变量的名称.但是在我阅读时，似乎人们使用 表达式或切换类名.$scope, then specify that variable's name like you would anywhere else in the element's ng-class="" attribute. But as I'm reading, it seems like it's more much complicated as people are using expressions or toggling the class name(s).$scope.dndElemClass 为布尔值，具体取决于用户是触发 dragenter 还是 dragleave.我还包括了 $scope.$apply() 作为很好的衡量标准，因为我发现我不理解 angular.bind() 相对于 的优势.addEventListener 或 .ondragenter = function() {};.无论如何，这些都没有像我期望的那样设置表的类.$scope.dndElemClass to a boolean value based on whether the user triggers dragenter or dragleave. I also included $scope.$apply() for good measure, as I am finding that I don't understand the advantage of angular.bind() over .addEventListener or .ondragenter = function() {};. Regardless, none of this has caused the table's class to get set as I would expect it to.推荐答案
CurrentFolder 控制器中，添加$scope.dndElemClass = '';
$scope.dndElemClass 包裹在 $apply 中.$scope.dndElemClass inside $apply.$scope.$apply(function() { $scope.dndElemClass = 'on-drag-enter'; });
登录
关闭
