为引导菜单项创建指令

Creating a directive for bootstrap menuItems

本文关键字：创建 指令 菜单项      更新时间：2023-09-26

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

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

更新：

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

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

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

在你的index.html中，去掉属性item中的双括号，

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

此外，在您的引导菜单项中，将范围项的声明从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可以作为对象而不是纯文本字符串传递给指令的模板。

相关文章：