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

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

我有两个连接的ui可排序的列表。当其中一个列表为空时,我需要显示一条消息;当拖动时清空空列表时,我需要显示一个样式的放置目标并隐藏空列表消息。我能够编写绝大多数这个代码和here is a simplifed Codepen of it working.

错误是当您从填充列表中拖动空列表然后再次出现时,空列表将显示空列表占位符和样式放样目标。这是一个屏幕截图:
Both the empty state and drop target

问题的根源似乎在于我计算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不太复杂,即使它不是纯粹的角度。

http://stackoverflow.com/questions/31799663/how-can-i-make-it-so-only-an-empty-state-or-a-drop-target-placeholder-of-ui-sort

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:angularjs – 我如何才能使它只有一个空的状态或一个放置目标占位符的ui-sortable显示?