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

【问题标题】：How to switch position of div in directive如何在指令中切换div的位置
【发布时间】：2015-12-14 08:57:21
【问题描述】：

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

在 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>'
}
})

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

<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 次视图。

有什么建议吗？

【问题讨论】：

你有什么代码可以给我们看吗？
@Jesse 好的，添加小提琴 5 分钟。

标签： javascript html css angularjs angularjs-directive

【解决方案1】：

有多种方法可以做到这一点，显然这些方法比其他方法更干净。

如果没有其他因素会影响您用来解决此问题的方法，并且如果任务像切换位置一样简单，我想您可以定义容器 div（包含两个较小 div ) 作为 flexbox 与

display:flex

和

flex-flow: row nowrap,

然后在悬停、滚动、切换或其他任何情况下...更改 flex-flow 到 flex-flow: row-reverse nowrap

如果你需要一点动画效果，你可以添加 transition: .5 到容器 div

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

【讨论】：

【解决方案2】：

您可以使用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;
}

指令

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

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

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

      }
    }
  })

【讨论】：

它似乎没有为我切换 .. 你能检查一下吗谢谢
你用的是什么浏览器？
你试过我发送的演示链接了吗？我在 Chrome OS X 上运行良好

【解决方案3】：

您可以在此使用 angular ui sortable。您可以轻松地拖动它们并对其进行排序。您可以放置处理程序，以便只有部分 div 能够拖动 div。

【讨论】：