如何在指令中切换div的位置

Question

我有一个呈现以下结构的指令

在Div1中，我有一些内容，在Div2中，我有一些其他内容。中间有一个分离器。我需要一个函数将div位置Div1替换为Div2位置，反之亦然。在Angular指令中，执行此操作的一些好方法是什么？

我能想到的一种方法是使用ng-switch，但将不得不做一些有信誉的工作……还有其他好方法吗？切换过程中的某些动画很酷。

不允许使用jQuery。以下是演示小提琴-http://jsfiddle.net/gauravsoni/z9gz1wgy/

示例代码：

 angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
  $scope.orientation = "horizontal";
  $scope.hello = "Hello from Controller!";
})

.directive('myDirective',function(){
    return{
    template:'<div kendo-splitter><div>1st pane</div><div>2nd pane</div></div>'
}
})

UPDATE：我正在使用以下代码进行切换，

<button ng-click='toggle = !toggle'>Switch View</button>
<div ng-if="toggle">
    <div>
        Left side 
    </div>
    <div>
        right side
    </div>
</div>

<div ng-if="!toggle">
    <div>
        right side 
    </div>
    <div>
        left side
    </div>
</div>

因此，基于适当的切换值div被激活，唯一的缺点是我必须将视图写入2次。

有什么建议吗？

Answer 1

您可以使用flexbox并定义元素的顺序。然后使用angular切换容器上的类。您也可以使用浮点数或其他一些CSS技术来弄乱订单，但想法是为此使用CSS。

请参见下面的演示。http://codepen.io/jessegavin/pen/ZbWeNV

模板

<div ng-app="demo">

  <columns></columns>

  <script type="text/ng-template" id="columns.html">
    <div>
      <div class="columns">
        <div class="column column-one">Col 1</div>
        <div class="column column-two">Col 2</div>
      </div>
      <button ng-click="swap()">Swap</button>
    </div>
  </script>

</div>

CSS

.columns {
  display: flex;
}
.column-one { order: 1; }
.column-two { order: 2; }

.swapped {
  .column-one { order: 2; }
  .column-two { order: 1; }
}

.column {
  width: 50%;
  height: 200px;
  border: solid 1px red;
}

Directive

angular.module("demo", [])
  .directive("columns", function() {

    return {
      templateUrl: "columns.html",
      link: function(scope, element, attrs) {

        scope.swap = function() {
          element.toggleClass("swapped");
        }

      }
    }
  })

Answer 2

您可以对此使用角度ui sortable。您可以轻松地对其进行拖动和排序。您可以放置​​处理程序，以便只有div的一部分能够拖动div。

Answer 3

[有多种方法可以做到，一个人的清洁度明显高于其他人。

如果没有其他因素可以影响该方法，您可以使用它来解决此问题，并且如果任务只是切换位置一样简单，那么我想您可以定义容器div（包含两个较小div的容器）作为具有display：flex和flex-flow：行nowrap的flexbox，然后在悬停，滚动或任何其他方式下...将flex-flow更改为flex-flow：row-reverse。

如果需要一点动画效果，可以在容器div中添加转场：0.5。>

对不起，如果我不清楚:(