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

Question

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

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

我能想到的一种方法是使用 ng-switch，但必须做一些有信誉的事情……还有其他好的方法吗？切换期间的一些动画会很酷。

不允许使用 jQuery。以下是演示 fiddle - 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>'
}
})

更新: 我正在使用以下代码进行切换，

<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 被激活，这里唯一的缺点是我必须编写 View 2 次。

有什么建议吗？

Answer 1

您可以使用flexbox 并为元素定义顺序。然后使用 angular 在容器上切换一个类。您也可以使用 float 或其他一些 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;
}

指令

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

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

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

      }
    }
  })