Javascript 是否可以从指令定义内部访问指令实例？

我正在尝试为我的应用程序中可以使用的抽屉创建一个指令。我想做的是：当用户打开一个抽屉时，我需要关闭任何其他当前打开的抽屉

这是我当前的代码：

标记

<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>

---

仅使用指令打开一个抽屉是否可能导致其他抽屉关闭？

我将该指令与抽屉服务结合使用。使用抽屉服务公开跨各种模型、视图等协调所需的内容。例如，您可以让每个抽屉指令将自身注册到服务（例如，发送回调以获取通知）。然后，您可以在服务上拥有一个方法，当调用该方法时，该方法将向所有已注册的抽屉发送消息以关闭。这也使得它的实现更加简洁，因为如果其他任何东西必须与抽屉交互，它们可以与服务交互，而不是与指令交互，并保持与UI实现的解耦

您可以使用在指令的所有实例之间共享的控制器

来自AngularJS：

*控制器-控制器构造函数。控制器在预链接阶段之前实例化，并与其他指令共享（请参见require属性）。这允许指令彼此通信并增强彼此的行为

例如，您可以参考AngularUI引导程序项目中的Accordion指令。

注意

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);
        }
    };
}); 

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);
        });         

    }
};  

});

尽管我得到了一些答案，为我指明了一个好的方向，但实施这些建议需要一些额外的作业。我在这里介绍我的发现，只要当前的实现是有效的

使用建议，我创建了一个记录所有抽屉的服务。我提出的问题是“如果不是DOM，那么什么是抽屉？”。 经过阅读，我发现我可以使用指令定义上的

scope:true

选项为每个抽屉创建一个特定的范围，因此每个范围实例都引用它对应的抽屉

Drawer.html

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

    </div>
</div>

<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>

---

如何获取抽屉的特定实例并将其提供给服务？我是否可以将open（）和close（）方法添加到抽屉实例，以便从服务中关闭它们？