AngularJS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-resource.min.js"></script>
<div class="page">
<button ng-click="openFlyout()">Button {{fly.flyoutOpen}}</button>

<flyout foopen={{fly.flyoutOpen}}>
    <button ng-click="close()">X</button>
    dasdasdasd
</flyout>
</div>

CSS

flyout{background-color:#444;display:block;position:absolute;width:200px;height:100px;}
flyout button{float:right;}

JavaScript

angular.module('myApp', [])
.controller('MyController', function($scope) {
    	$scope.fly = {flyoutOpen:false};
    	$scope.openFlyout = function(){
    		$scope.fly.flyoutOpen = !$scope.fly.flyoutOpen;
    	}
    }).directive('flyout', function() {

    return {
        restrict: 'AE',
        link: function(scope, el, attr) {

            scope.close = function() {
               scope.fly.flyoutOpen = !scope.fly.flyoutOpen;
            };
                
            attr.$observe('foopen', function(value) {        
                console.log(typeof value);
                if (value == "true") {                      
                    el.css('right', '0');
                    console.log("left:"+value);
                } else {                                   
                    el.css('right', '-150px');
                    console.log("right:"+value);
                }       
            });
        }
    };
});