Как переключить положение 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

Вы можете использовать угловой ui sortable. Вы можете легко перетащить и отсортировать их. Вы можете разместить обработчиков, так что только часть div может перетаскивать div.

Answer 2

Вы можете использовать flexbox и определить порядок элементов. Затем используйте угловое значение для переключения класса на контейнер. Вы также можете использовать поплавки или какой-либо другой метод 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"); 
     } 

     } 
    } 
    })