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

Question

我有两个连接的 ui-sortable 列表。当其中一个列表为空时，我需要显示一条消息；当该空列表在拖动时悬停时，我需要显示一个样式化的放置目标并隐藏空列表消息。我能够编写此代码的绝大部分和 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>

依赖项列表对于 codepen 的工作来说相当长，我从实际生产代码中简化了代码，消除依赖项会使自定义代码变得相当可观。如果您想尝试自己运行它，这里有一个依赖项列表:jquery、jquery-ui、angular、bootstrap、lodash 和 sortable from angular-ui。那里也有一些很棒的字体。

Answer 1

我想我解决了这个问题。这是 codepen with the solution .

基本上，问题是当您的光标将项目拖出可排序列表时，dragout 事件被(正确)触发，但占位符将保留在可排序列表中，直到您将其拖到另一个可排序列表中。因此，在此期间，附件空状态元素和占位符都将显示在可排序列表中。

这是我在代码中编辑的行:

少文件:

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 不那么复杂，即使它不是纯 Angular。