I've made a plunker, I can't figure out, how to get it working. The plunker link is:
http://run.plnkr.co/X7gj3rncY9EtEk9h/ Any help will be apreciated. Tnks Em segunda-feira, 30 de junho de 2014 00h21min40s UTC-3, Diogo Rafael Jacobs escreveu: > > 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.
