0

最近我决定学习 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在传递的函数中设置属性并没有改变任何东西 - 链接都显示为空。

注意## 我正在使用引导 css。

4

1 回答 1

0

拆除时

$scope.hideSubmenu=true;

创建指令控制器时的语句似乎可以工作。

看看这个小提琴http://jsfiddle.net/sg560740/3/

于 2014-08-11T00:51:14.853 回答