0

最近、Angular を学ぶことにしました。これは優れたフレームワークであり、私はかなり楽しんできましたが、その本当の要点であるディレクティブに行き着きました。CSS の移行以降、おそらく HTML に起こった最高の出来事だと思います。いくつかの場所で奇妙な変更されたタブ形式を使用する Web サイトを構築しました (ページのコンテンツはこれらのタブに読み込まれ、バリエーションが FAQ ページに使用されました)。

<menu>私自身いじり回しているうちに、タグに出くわし、それに対する失望を思い出しました。menu タグを、子要素としてサブメニューを持つアイテムのドロップダウンを使用して、Web サイトの独自のタイプのナビゲーション メニューに変更するディレクティブを作成したいと考えています。例：

<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 (別名、子タグなし) の要素について、渡された HTML 値を収集し、子タグ<menu>を持つアイテムに渡される menu-title 属性に設定するにはどうすればよいですか? <menu>?

どんな助けでも大歓迎です。答えがトランスクルード機能に関係していることは知っていますが、使い方がわかりません。以前に $transclude をメニュー項目コントローラーに$scope.menuTitle渡しましたが、渡された関数内でプロパティを設定しても何も変わりませんでした。リンクはすべて空でした。

注## ブートストラップ css を使用しています。

4

1 に答える 1

0

を外すときは

$scope.hideSubmenu=true;

ディレクティブコントローラーが作成されたときのステートメントは機能しているようです。

このフィドルをチェックしてくださいhttp://jsfiddle.net/sg560740/3/

于 2014-08-11T00:51:14.853 に答える