Angular: Empty Fiddle

http://angularjs.org/

by yahyaKACEM

HTML

<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script src="http://code.angularjs.org/angular-1.0.0rc4.js"></script>
<body  ng-app="myApp" layout state="bodyState" ng-init="bodyState = true">
    <div class="ui-layout-north">
        angular-1.0.0rc4.js <button ng-click="bodyState = !bodyState">Toggle bodyState</button> {{bodyState}}            
    </div>
    <div class="ui-layout-west">
        West
    </div>
    <div class="ui-layout-center">
        Center
    </div>
    <div class="ui-layout-east">
        East
    </div>           
    <div class="ui-layout-south">
        South
    </div>                
</body>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('layout', function() {
    return {        
        
        link: function(scope, elm, attrs) {
            var layout = elm.layout({ applyDefaultStyles: true });

            scope.layout  = layout;
            
            scope.$watch(attrs.state, function(state) {
                if (state == true) {
                    scope.layout.sizePane('east', 120);
                    scope.layout.show('west');
                    scope.layout.show('south');
                } else {
                    scope.layout.sizePane('east', 60);
                    scope.layout.hide('west');                        
                    scope.layout.hide('south');
                }                
            });                
        }
    };
});

            
myApp.controller('MyCtrl', function($scope) {
  $scope.bodyState = true                        
});