我已经为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}}
显示在页面上。
答案 0 :(得分: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
可以作为对象而不是纯文本字符串传递给指令的模板。