Angular:

http://angularjs.org/

by mrajcok

HTML

<div ng-controller="MyCtrl">
    <users-and-apps>
        <users-and-apps-nav></users-and-apps-nav>
    </users-and-apps>
</div>

JavaScript

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

app.directive('usersAndApps', function() {
    return {
        restrict:'EA',
        scope: true,
        //controller: function() {
        //    this.toggleView = function(viewName){
        //        console.log('show view ' + viewName);
        //    }
        //},
        link:function(scope, elem, attrs) {
            scope.FOO_VIEW = 'fooView';
            scope.BAR_VIEW = 'barView';
            scope.BAM_VIEW = 'bamView';
            scope.toggleViewParent = function(viewName){
                console.log('show view ' + viewName);
            }
        }
    }
}).directive('usersAndAppsNav', function() {
    return {
        restrict: 'AE',
        //require:'^?usersAndApps',
        replace:true,
        scope:true,
        link:function(scope,elem,attrs) { //,usersAndAppsCtrl){
            scope.toggleView = function(viewName){
                scope.toggleViewParent(viewName);
            }
        },
       template: '<div><button class="btn btn-large btn-primary" ng-click="toggleView(FOO_VIEW)">Foo View</button><button class="btn btn-large btn-primary" ng-click="toggleView(BAR_VIEW)">Bar View</button><button class="btn btn-large btn-primary" ng-click="toggleView(BAM_VIEW)">Bam View</button></div>'
    }
});

function MyCtrl($scope) {
}