angularjs – 我如何才能使它只有一个空的状态或一个放置目标占
我有两个连接的ui可排序的列表。当其中一个列表为空时,我需要显示一条消息;当拖动时清空空列表时,我需要显示一个样式的放置目标并隐藏空列表消息。我能够编写绝大多数这个代码和
here is a simplifed Codepen of it working.
错误是当您从填充列表中拖动空列表然后再次出现时,空列表将显示空列表占位符和样式放样目标。这是一个屏幕截图: 问题的根源似乎在于我计算sortableList指令的列表是否为空: scope.isEmpty = function() { if (!scope.attachments) { return true; } else if (scope.dragDirection === 'drag-out' && !scope.hovered) { return scope.attachments.length <= 1; } else if (scope.hovered) { return false; } else { return scope.attachments.length === 0; } }; 请注意,我正在跟踪范围的状态,并使用$ apply确保DOM更新如下所示: function onDragStart() { scope.$apply(function() { scope.dragDirection = 'drag-out'; }); } function onDragStop() { scope.$apply(function() { scope.dragDirection = ''; }); } function onDragOver() { scope.$apply(function() { scope.hovered = true; }); } function onDragOut() { scope.$apply(function() { scope.hovered = false; }); } 这是指令模板的html: <div class="drop-target" ui-sortable="sortOptions" ng-model="attachments"> <div ng-repeat="attachment in attachments" class="attachment-box"> <span class="fa fa-bars pull-left drag-handle"></span> <div class="link-attachment"> <a href ng-href="{{ attachment.fileUrl }}" target="_blank" class="attachment-name">{{ attachment.name }}</a> <div class="extra-info link-info">{{ attachment.fileType }}</div> </div> </div> <attachment-empty-state ng-show="isEmpty()"></attachment-empty-state> </div> 依赖列表对于代码工作来说是相当长的,我简化了实际生产代码中的代码,并消除了依赖关系将使定制代码相当可观。如果你想尝试让它自己运行,这里是一个依赖关系的列表:jquery,jquery-ui,angular,bootstrap,lodash,并且可以从angular-ui进行排序。在那里也有一些字体。
我想我解决了这个问题。这是一个
codepen with the solution。
基本上,问题是当您的游标将项目从可排序列表中拖出时,dragout事件被正确地触发,但占位符将保留在可排序列表中,直到将其拖动到另一个可排序列表中。所以在两个时间之间,attach-empty-state元素和占位符都将显示在sortable-list中。 以下是我在代码中编辑的行: 少文件: attachment-empty-state { ... // hide empty state when the placeholder is in this list .placeholderShown & { display:none; } } JS: //Inside sortable-list // Helper function function setPlaceholderShownClass(element) { $(".drop-target").removeClass("placeholderShown"); $(element).addClass("placeholderShown"); } ... function onPlaceholderUpdate(container,placeholder) { setPlaceholderShownClass(container.element.context); ... } 如果你不喜欢使用jQuery在全局添加和删除类,你可以使用$ rootScope。$ broadcast(“placeholderShown”)和$ rootScope。$ on(“placeholderShown”,function(){// scope logic}想到一点点jQuery不太复杂,即使它不是纯粹的角度。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- angularjs – angular.js ui-router将变量传递给状态url
- 关于Scala中类型类的问题
- Vim – 删除搜索字符串
- angularjs – angularui bootstrap dropup无法正常工作
- 角度材料自动完成不起作用,没有显示错误
- twitter-bootstrap – Bootstrap 3 Off-Canvas边栏菜单就像
- 【重大更新】DevExpress v17.1新版亮点(Bootstrap篇)
- shell脚本 过滤出对应目录下的所有png文件名
- postfix – dovecot错误未知设置:unix_listener
- scala – sbt 0.11运行需要的任务示例