更新：

Question

我已经为bootstrap导航栏中的某些样板构建了一个指令，其中包含导航栏折叠的ng-transclude。我还发现li个项目有两种类型的navbar-nav元素取决于菜单项是否是下拉列表。我发现此下拉列表不起作用。

我已在plunker。

中构建了我的代码

我的JS代码如下所示：

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);
    }
  }
});

我的html模板如下所示：

//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>

这是我的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>

问题是如何访问item内的bootstrap-menuitem？该模板似乎无法使用item，尽管它位于scope？

中

更新：

在作用域上访问的item属性是string，它需要是一个对象。如何在嵌套指令范围内的控制器作用域中获取属性？

使用item:"="代替@会导致错误http://pastebin.com/e9NDVH5b。我假设在=上使用bootstrap-menuitem时item来自ng-repeat？

但是，它会导致{{item.title}}显示在页面上。

Answer 1

在index.html中，删除属性item中的双括号，

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

此外，在bootstrapMenuitem中，将范围项的声明从item: "@"更改为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);
    }
  }
});

这样，item可以作为对象而不是纯文本字符串传递给指令的模板。

为bootstrap menuItem创建指令

更新：

1 个答案: