JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-controller="myCtrl" class="container">
<div my-directive>
<ng-switch on="selection">
<div ng-switch-when="A" class="a">A</div>
<div ng-switch-when="B" class="b">B</div>
<div ng-switch-default>default</div>
</ng-switch>
<button ng-click="switchSelection()" >switch</button>
</div>
</div>
CSS
.container div{
width: 200px;
height: 200px;
}
.a{
background-color: lime;
}
.b{
background-color: aqua;
}
JavaScript
angular.module('myApp', [])
.directive("myDirective", function ($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function(){
console.log(element.find("div"));
},0)
}
}
});
function myCtrl($scope) {
$scope.selection="B";
$scope.switchSelection=function(){
if ($scope.selection=="B"){
$scope.selection="A";
}
else{
$scope.selection="B";
}
}
}