为 bootstrap 个菜单项创建指令

Question

我已经为 bootstrap 导航栏中的一些样板构建了一个指令，并为导航栏添加了 ng-transclude-collapse.I 还发现有两种类型的 li 元素对于 navbar-nav 个项目，具体取决于菜单项是下拉菜单还是 not.I，发现此下拉菜单不起作用。

我已经在 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>

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

更新：

作用域上访问的项目属性是一个 string，它需要是一个 object.How 我可以在作用域的控制器作用域中获得一个属性嵌套指令的？

使用 item:"=" 而不是 @ 会导致错误 http://pastebin.com/e9NDVH5b 。我假设在 bootstrap-menuitem 上使用 = 时，它从 ng-repeat?

中获取 item

但是，它会导致 {{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 个菜单项创建指令

Creating a directive for bootstrap menuItems

javascript

twitter-bootstrap

angularjs

angularjs-scope

angular-directive

更新：