Angular:
http://angularjs.org/
HTML
<div ng-controller="MyCtrl">
<div data-nav-item text="A link for admin people" href="/mytemplate.html"
id="idx" todisableornot="rights[0]"></div>
<div data-nav-item text="A link for general people" href="/mytemplate.html"
id="idx" todisableornot="rights[1]"></div>
</div>
CSS
.adminRole {
color:red;
}
.adminRole a {
color:red;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive('navItem', function () {
return {
restrict: 'A',
scope: {
text: '@',
href: '@',
id: '@',
todisableornot: '&'
},
replace: true,
link: function (scope, element, attrs) {
},
template: '<li ng-class="{adminRole:todisableornot()}"><a href="{{href}}" id="{{id}}">{{text}}</a></li>'
}
});
function MyCtrl($scope) {
$scope.rights =[true, false];
}