0

アプリケーションで使用できるドロワーのディレクティブを作成しようとしています。私がやりたいことはこれです: ユーザーが 1 つの引き出しを開くと、現在開いている他の引き出しを閉じる必要があります。

これは私の現在のコードです：

マークアップ

<a href="javascript:;" id="my_switch">
    Click me to toggle the drawer!
</a>
<drawer data-switch="#my_switch">
    Content of the first drawer
</drawer>

<a href="javascript:;" id="my_other_switch">
    Click me to toggle the other drawer!
</a>
<drawer>
    Content of the second drawer
</drawer>

Drawer.html

<div class="drawer_container">
    <div class="drawer" ng-transclude>

    </div>
</div>

指令

MyApp.directive('drawer', function(DrawerService){
return {        
    restrict: 'AE',
    replace: true,
    transclude: true,
    templateUrl: 'drawer.html',                     
    link: function(scope, element, attributes){         
            var drawer_switch = $(attributes.switch);
            var drawer = $(element).find('.drawer');

            var toggle = function(event){
                drawer.toggle();
            };

            drawer_switch.bind('click', toggle);
        }
    };
});

ディレクティブのみを使用して、1 つの引き出しを開くと、残りの引き出しが閉じられる可能性はありますか?

4

3 に答える 3

0

ノート

良い方向性を示すいくつかの回答が得られましたが、それらの提案を実装するには追加の宿題が必要でした。現在の実装である限り、ここで調査結果を提示します。

Jeremy Likness の提案を使用して、すべての引き出しを記録するサービスを作成しました。私が思いついた問題は、「DOMではない場合、ドロワーとは何ですか? 」です。少し読んだ後、ディレクティブ定義のオプションを使用して各ドロワーに特定のスコープを作成できることがわかりました。そのscope: trueため、各スコープ インスタンスは対応するドロワーを参照します。

Drawer.html

<div class="drawer_container">
    //Whether the drawer is visible is now being derermined here   
    <div class="drawer" ng-show="is_open" ng-transclude>

    </div>
</div>

サービス

MyApp.factory('DrawerService', function() {
var drawers = [];
var drawerService = {
    // Adds the scope of a drawer to the drawers array. This method should be called when 
    // a new drawer gets created in order to be handled later
    addDrawer: function(drawer){
        drawers.push(drawer);       
    },
    // Closes all the drawers that are open, except for the one that is provided
    closeTheRest: function(drawer){         
        for(var i = 0; i < drawers.length; i++)
        {
            if(drawers[i] !== drawer)
            {       
                  drawers[i].$emit('forcedClose');
            }
        }        
    }
};

  return drawerService;
});

指令

MyApp.directive('drawer', function($timeout, DrawerService){
return {        
    restrict: 'AE',
    replace: true,
    transclude: true,       
    scope: true,
    templateUrl: 'drawer.html',               
    controller: function($scope)
    {
        $scope.is_open = false;
    },
    link: function(scope, element, attributes){                     
        var drawer_switch = $(attributes.switch);           
        var drawer = $(element).find('.drawer');

        DrawerService.addDrawer(scope);

        drawer_curtain.css({
        'height': $(document).height()
        });         

        scope.$on('forcedClose', function(){
            scope.is_open = false;
        });


        drawer_switch.bind('click', function(){
            scope.is_open = !scope.is_open;                 
            DrawerService.closeTheRest(scope);
        });         

    }
};  

});
于 2013-09-13T08:20:15.373 に答える
0

ディレクティブを引き出しサービスと組み合わせます。ドロワー サービスを使用して、さまざまなモデルやビューなどの間で調整する必要があるものを公開します。たとえば、各ドロワー ディレクティブをサービスに登録することができます (たとえば、通知のためにコールバックを送信します)。次に、呼び出されたときに、登録されているすべてのドロワーに閉じるようにメッセージを送信するサービスのメソッドを作成できます。これにより、ドロワーと対話する必要がある場合に、ディレクティブではなくサービスと対話し、UI 実装から切り離したままにすることができるため、実装がよりクリーンになります。

于 2013-09-12T12:51:15.573 に答える
0

ディレクティブのすべてのインスタンス間で共有されるコントローラーを使用できます。

ディレクティブに関するAngularJS のドキュメントから:

*controller - コントローラー コンストラクター関数。コントローラーはリンク前フェーズの前にインスタンス化され、他のディレクティブと共有されます (require 属性を参照)。これにより、ディレクティブが相互に通信し、相互の動作を強化することができます。

AngularUI Bootstrap プロジェクトの一部である Accordion ディレクティブを例として参照できます。

于 2013-09-12T12:56:59.460 に答える