Angular: Empty Fiddle

http://angularjs.org/

by jrweinb

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <div ng-controller="Nahttp://jsfiddle.net/knalli/ED9GW/#forkvigationController">
        <navigation over="items">
            <navigation-item ng-repeat="item in items">Item: {{item.title}}</navigation-item>    
        </navigation>
        
         <navigation over="items">
            <navigation-item ng-repeat="item in items2">Item: {{item.title}}</navigation-item>    
        </navigation>
    </div>

CSS

ul.navigation li.active {
    background-color: red;
}

JavaScript

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

// Fill with data.
app.controller('NavigationController', function($scope){
	$scope.items = [{
        id: 'item1', title: 'Item 1', sub:'1'
	}, {
	  id: 'item2', title: 'Item 2'
	}, {
	  id: 'item3', title: 'Item 3'
	}];
    
    	$scope.items2 = [{
        id: 'item1A', title: 'Item 1A', sub:'1'
	}, {
	  id: 'item2A', title: 'Item A2'
	}, {
	  id: 'item3A', title: 'Item 3A'
	}];
});

app.directive('navigation', function() {
    return {
        template: '<ul class="navigation" ng-transclude></ul>',
        replace: true,
        restrict: 'E',
        transclude: true,
        link: function($scope, $element, attrs){
             $scope.states = {};
             $scope.states.activeItem = 'item1';
        }
    };
});

app.directive('navigationItem', function(){
    return {
        template: '<li class="item" ng-class="{active: item.id == states.activeItem}" ng-click="states.activeItem=item.id" ng-transclude><ul class="nested" ng-show="item.sub"><li>one</li></ul></li>',
        restrict: 'E',
        replace: true,
        transclude: true
    };
});