Question

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

在Div1中我有一些内容，在Div2中有一些其他内容。中间有一个分离器。我需要一个函数在Div2位置交换div位置Div1，反之亦然。什么是在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次视图。

有什么建议吗？

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;
}

指令

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的容器））作为Flexbox，

display:flex

和

flex-flow: row nowrap,

，然后在悬停，滚动，切换或其他任何内容上更改 flex-flow至flex-flow: row-reverse nowrap

如果您需要一点动画效果，则可以向容器div添加过渡：.5

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

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

3 个答案: