Is that the right way of doing directive in angular? This takes the
configured UI-Router states and make the navigation bar from that data.
app.directive('navigation', ['$parse', '$compile', function ($parse,
$compile) {
return {
restrict: 'A',
templateUrl: 'views/widgets/navbar.html',
replace: true,
scope: {},
controller: ['$scope', '$state', function ($scope, $state) {
var menu = [];
var states = $state.get();
_.each(states, function(state, key) {
if(!_.isObject(state) || _.has(state, 'abstract') || _.
has(state, 'parent')) {
return;
}
var object = {
text: _.has(state, 'data') && _.has(state.data,
'title')
? state.data.title : '(no title)',
state: state.name,
href: state.url
}
menu.push(object);
});
$scope.nav = {};
$scope.nav.menu = menu;
}],
link: function (scope, element, attrs) {
scope.nav.brand = attrs.navBrand;
console.log(scope);
}
};
}]);
The template:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle=
"collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ nav.brand }}</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="node in nav.menu" active-tab="{{node.href}}">
<a ui-sref="{{node.state}}"><b>{{node.text}}</b></a>
</li>
</ul>
</div>
</nav>
And the directive call:
<div navigation nav-brand="My Brand"></div>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
