AngularJS - 指令范围不设置元素纳克级 [英] AngularJS - directive scope not setting ng-class on element

问题描述

Plunker

我有数据表：

<table class="table table-hover" ng-class="dndElemClass" drag-and-drop>
  ...
</table>

我的目标是通过元素的 ondragenter分配 $ scope.dndElemClass ='​​上拖动输入给表阴影事件侦听器：

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) {
                        ...
                    };
                }
            });
        }
    }
})

尽管在 ondragenter 和 ondragleave <分配 $ scope.dndElemClass 的价值/ code>事件侦听器，在＆LT;表＆gt; 似乎没有被承认的价值，并为出现任何阴影效果分配类

Despite assigning the value of $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.

到目前为止，我测试过，它并认识到价值，如果我设置在我把它分配给空白上述code指令的控制器属性的类，所以我知道它会接受来自该指令。与控制器设置为一个测试，如果我触发 ondragenter 监听器类，它消除了阶级。我还证实， $范围。$适用（）正确分配 scope.dndElemClass 与价值日志记录，但是由于各种原因，在事件监听器的 $范围设置时。$适用（），表的纳克级属性将无法识别变量赋值，并认为它是空的。

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 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.

更新：
按照Josh的评论，我清理了code，让我没得 $适用事件侦听器回调的变量赋值。

UPDATE: As per Josh's comment, I cleaned up the code so that I didn't have to $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) {
                        //...
                    });
                }
            });
        }
    }
})

仍然没有运气。我可以确认这是执行与记录的回调，但获取变量赋值没有运气由表的纳克级属性进行识别。

更新2：我甚至通过看完后更加困惑AngularJS对ngClass 文档。对我来说，我认为这是因为要在当前控制器的（或在我的情况下，该指令的） $作用域的变量的类（数组中的S）设置的名称一样简单，然后指定变量的名称，比如你会在元素的纳克级=属性其他地方。但正如我读，现在看来似乎更复杂得多，因为人们正在使用的前pressions 或切换类名（S）。

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) $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).

使用反复的想法，我分叉我plunker 来重现这种情况设置 $ scope.dndElemClass 来根据用户是否触发的dragenter 或 dragleave 。我还包括 $范围。$适用（）的好办法，因为我发现我不明白 angular.bind的优势（ ）在阅读进度或 .ondragenter =功能（）{}; 。无论如何，这都不是造成该表的类来获取设置为我期望它。

Using the idea of toggling, I forked my plunker to recreate the situation setting $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.

推荐答案

我不知道如果你仍然需要一个答案，但我可能有固定的普拉克。

I am not sure if you still need an answer, but I might have fixed your plunk.

在 CurrentFolder 控制器，添加

$scope.dndElemClass  = '';

然后包 $ scope.dndElemClass 在 $适用。

$scope.$apply(function() { $scope.dndElemClass = 'on-drag-enter'; });

检查一个更清晰的画面完整普拉克。

这篇关于AngularJS - 指令范围不设置元素纳克级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！