0

I have built a directive for some of the boilerplate in the bootstrap navbar with ng-transclude for the navbar-collapse.I also find that there are two types of li elements for the navbar-nav items depending on whether the menu item is a dropdown or not.I find that this dropdown is however,not working.

I have built my code here in the plunker .

My JS code looks like this:

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

app.controller('main',['$scope',function($scope){
  $scope.navbarOptions = {
        color:'inverse',
        position:'fixed-top',
        collapseTarget:'navbar-ex1-collapse',
        brand:'My Login',
    };
    $scope.menuItems=[{title:'home'},{title:'projects'},{title:'pricing'},
    {
      title:'Stack',
      dropdown:['Java','Ruby','Javascript','Go']
    }];
}]);

app.directive('bootstrapNavbar',function(){
  return {
        restrict:'AE',
        templateUrl:'navbar.html',
        scope:{
            options:"="
        },
        transclude:true,
    };
});

app.directive('bootstrapMenuitem',function(){
  return {
    restrict:'EA',
    templateUrl:'bootstrap-menuItem.html',
    scope:{
      item:"@"
    },
    link:function(scope,element,attrs){
      console.log(scope);
      console.log(element);
      console.log(attrs);
    }
  }
});

My html templates look like this:

//navbar.html
<nav class="navbar navbar-{{options.color}} navbar-{{options.position}}" role="navigation">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <!-- figure out a way to do toggle as an attribute directive -->
        <button ng-show="options.collapseTarget" class="navbar-toggle" data-toggle="collapse" data-target=".{{options.collapseTarget}}">
            <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="#">{{options.brand}}</a>
    </div>
    <div class="collapse navbar-collapse {{options.collapseTarget?options.collapseTarget:''}} navbar-body" ng-transclude>
    </div><!-- /.navbar-collapse -->
</div>
</nav>

//bootstrap-menuItem.html
<li ng-hide="dropdown && dropdown.length">


<a href="#">{{item.title}}</a>
</li>

<li ng-show="dropdown && dropdown.length" class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{item.title}} <span class="caret"></span></a>
    <ul  class="dropdown-menu" role="menu">
      <li ng-repeat="action in item.dropdown"><a href="#">{{action}}</a></li>
    </ul>
</li>

This is my html:

 <!DOCTYPE html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Building a directive for horizontal-form using Bootstrap using Angular">
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="main">
    <nav options="navbarOptions" bootstrap-navbar>
      <ul class="nav navbar-nav">
        <bootstrap-menuitem ng-repeat="item in menuItems" item="{{item}}"></bootstrap-menuItem>
      </ul>
    </nav>
  </body>

</html>

The question is how do I access the item inside bootstrap-menuitem? The template seems unable to use the item although it is in the scope?

UPDATE:

The item property accessed on the scope is a string,it needs to be an object.How can I obtain a property in the controller scope on the scope of a nested directive?

Using item:"=" instead of @ causes the error http://pastebin.com/e9NDVH5b . I assume that when using = on the bootstrap-menuitem it takes the item from ng-repeat?

However,it causes {{item.title}} to show up on the page.

1 Answer 1

1

In your index.html, remove double brackets in attribute item,

<bootstrap-menuitem ng-repeat="item in menuItems" item="item"></bootstrap-menuItem>

Besides, in your bootstrapMenuitem, change scope item's declaration from item: "@" to item: "=":

app.directive('bootstrapMenuitem',function(){
  return {
    restrict:'EA',
    templateUrl:'bootstrap-menuItem.html',
    scope:{
      item:"="
    },
    link:function(scope,element,attrs){
      console.log(scope);
      console.log(element);
      console.log(attrs);
    }
  }
}); 

This way, item can be passed to your directive's template as an object instead of plain text string.

4
  • I cannot access $scope.item from the directive's link function,I can however access the item on the scope argument within the function Jan 30, 2015 at 8:55
  • @vamsiampolu I have updated my answer, now it can solve your problem. You can refer to these articles for more about how to create isolate scope for directives.
    – Rebornix
    Jan 30, 2015 at 9:17
  • changing to = instead of @ and using item="item" on the element caused pastebin.com/e9NDVH5b ,so would I get the data from ng-repeat or from the bootstrap-navbar directive. Jan 30, 2015 at 9:36
  • Do you mind updating the Plunker you provide? I simply update from your code base and doesn't see any error. The error you mentioned only exist when we use item:"=" and keep using item="{{item}}".
    – Rebornix
    Jan 30, 2015 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.