Search code examples
javascriptangularjstwitter-bootstrapangularjs-scopeangular-directive

Creating a directive for bootstrap menuItems

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.

Solution

  • 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.