Question

最近我决定学习Angular。这是一个很棒的框架，我已经有了很多乐趣，但我已经了解了真正的肉和土豆部分：指令。我认为自从CSS转换以来，它们可能是HTML发生的最好的事情。我建立了一个网站，在一些地方使用了一个奇怪的改变标签格式（页面内容加载在这些标签中，并且常见问题页面使用了一个变体）

在我自己的混乱中，我遇到了<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> -> ...的任何组合，因为实际的导航菜单可能需要。{/ p>

以下是我的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-title属性对于带有子<menu>标签的商品，会传递该内容吗？

感谢任何帮助。我知道答案与transclude函数有关，我只是不确定如何使用它。之前我已经将$ transclude传递给菜单项控制器，但是在传递的函数中设置$scope.menuTitle属性并没有改变任何东西 - 链接都显示为空。

注意##我正在使用bootstrap css。

Answer 1

删除

时

$scope.hideSubmenu=true;

创建指令控制器时的

语句似乎有效。

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

角度指令，可能是也可能不是另一个角度指令的孩子

注意##我正在使用bootstrap css。

1 个答案: