Hi,
This is my first post in this group, I`m really new to angularjs, and
after trying many different ways, I just can't get this working.
The problem is that I can't find a way to put the dropdown-submenu css
class in the <li> elements that have child nav itens. This css class
must be applied only in the itens not in first level of the nav. This is
why I used the parentCssClass atribute in my directive. What I'm doing
wrong? Is this the best way to do?
_*This is my app.js*_
app = angular.module('app', []);
angular.module('app').controller('headerController', ['$scope',
'$location', '$route', function($scope, $location, $route) {
$scope.menuItens = [
{
label: '1',
children: [
{
label: '1.1',
children: [
{label: '1.1.1'},
{
label: '1.1.2',
children: [
{
label: '1.1.2.1',
children: [
{
label: '1.1.2.1.1'
},
{
label: '1.1.2.1.2'
}
]
},
{
label: '1.1.2.2'
}
]
},
{label: '1.1.3'},
{label: '1.1.4'},
{label: '1.1.5'}
]
},
{label: '1.2'}
]
},
{label: '2'},
{label: '3'}
];
}]);
app.directive("navigation", ['$compile', function($compile) {
return {
restrict: 'A',
scope: {
menuItens: '=menu',
parentCssClass: '@parentcss'
},
template: '<li ng-repeat="item in menuItens" ng-class="{
\'{{parentCssClass}}\': (item.children.length > 0)}"><a
class="dropdown-toggle" data-toggle="dropdown">{{item.label}}</a><ul
class="dropdown-menu" role="menu" navigation menu="item.children"
parentcss="dropdown-submenu" ng-if="item.children.length > 0"></ul></li>',
compile: function(el) {
var contents = el.contents().remove();
var compiled;
return function(scope, el) {
if (!compiled)
compiled = $compile(contents);
compiled(scope, function(clone) {
el.append(clone);
});
};
}
};
}]);
*_The HTML is:_*
<div class="container-fluid" ng-controller="headerController">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" navigation menu="menuItens"
parentcss="">
<li class="active"><a href="#" title="Início"><i
class="icon-home"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
Thanks in advance.
--
--
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.
