I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image
Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-switch, but it seems like there might be better ways to achieve this without relying on jQuery. Additionally, I would like to incorporate some animations during the swapping process to enhance the user experience.
You can check out a demo of the current implementation here: Demo Fiddle
Sample Code:
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: I have implemented a simple toggle functionality to switch between the two divs. However, it involves duplicating the view code for each scenario. Does anyone have suggestions on how to improve this approach?
<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>
If you have any ideas or suggestions on how to optimize the code and achieve the desired functionality in a more efficient way, please let me know. Thanks!