angularjs – 我如何才能使它只有一个空的状态或一个放置目标占位符的ui-sortable显示？

我有两个连接的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 – 我如何才能使它只有一个空的状态或一个放置目标占位符的ui-sortable显示？

猜你在找的Angularjs相关文章