最近我决定学习 Angular。这是一个很棒的框架，我玩得很开心，但我已经了解了它真正的肉和土豆部分：指令。我认为它们可能是自 CSS 转换以来 HTML 发生的最好的事情。我建立了一个网站，在几个地方使用了一种奇怪的更改标签格式（页面的内容加载到这些标签中，FAQ 页面使用了一个变体）
在我自己的混乱中，我偶然发现了这个<menu>标签，并记得我对它的失望。我想构建一个指令，将菜单标签更改为自己的网站导航菜单类型，并为具有子菜单作为子元素的项目提供下拉菜单。例子：
<menu>
<menu-item menu-link="/">Home</menu-item>
<menu-item menu-link="/about">About</menu-item>
<menu-item menu-link="/something/" menu-title="Something">
<menu>
<menu-item menu-link="/something/sub-item1">Sub Item 1</menu-item>
<menu>
</menu-item>
</menu>
我希望隐藏菜单项标签内的菜单，直到将鼠标悬停在“某物”的菜单项上。我希望这适用于<menu> -> <menu-item> -> <menu> -> ...实际导航菜单可能需要的任何组合。
这是来自我的 javascript 的正在进行中的信息，请记住，我一直在摆弄，看看我是否能得到一些工作。
app.directive('menu',function(){
return {
restrict:'E',
require:'?^menuItem',
scope:{
id:'@',
text:'@'
},
link:function(scope,element,attr,parentItemScope){
console.log("Parent Item Present?", !angular.equals(parentItemScope,undefined));
if(!angular.equals(parentItemScope,undefined)){
parentItemScope.helloSubMenu(scope.id);
parentItemScope.updateSubmenu();
}
},
transclude:true,
template:'<div ng-transclude></div>'
};
});
app.directive('menuItem',function(){
return {
restrict:'E',
scope:{
menuLink:'@',
menuTitle:'@'
},
controller:function($scope,$attrs){
if(angular.equals($attrs.menuTitle,undefined)){
//How do you get the HTML value for ones that don't have submenus???
}
this.helloSubMenu = function(menuId){
console.log("Called from a menu within a menu-item tag! Menu ID is :", menuId);
}
this.updateSubmenu = function(){
$scope.hasSubmenu = true;
$scope.hideSubmenu=true;
};
$scope.toggleSubmenu = function(){
if($scope.hasSubmenu == true) $scope.hideSubmenu = !$scope.hideSubmenu;
};
$scope.hasSubmenu = false;
$scope.hideSubmenu=true;
},
transclude:true,
template:'<a ng-href="{{menuLink}}" ng-mouseover="toggleSubmenu()" ng-mouseout="toggleSubmenu()" class="btn btn-default">{{menuTitle}}</a><span ng-transclude ng-hide="hideSubmenu"></span>'
};
});
我现在的主要问题是：对于 0 级元素（也就是没有子<menu>标签），我如何收集传递的 HTML 值并将其设置为传递给带有子<menu>标签的项目的 menu-title 属性?
任何帮助表示赞赏。我知道答案与 transclude 功能有关，我只是不确定如何使用它。我之前已经将 $transclude 传递给菜单项控制器，但是$scope.menuTitle在传递的函数中设置属性并没有改变任何东西 - 链接都显示为空。