是否可以从指令定义中访问指令的实例？

Question

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

这是我目前的代码：

标记

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

是否可以仅使用指令打开一个抽屉使其余的抽屉关闭？

Answer 1

我会将指令与抽屉服务结合起来。使用抽屉服务来公开在各种模型，视图等之间进行协调所需的内容。例如，您可以让每个抽屉指令将自己注册到服务（例如，发送回调以进行通知）。然后你可以在服务上有一个方法，当被调用时会向所有已注册的抽屉发送一条消息来关闭。这也使得实现起来更加清晰，因为如果还有其他东西必须与抽屉交互，它们可以与服务交互而不是指令，并与UI实现保持分离。

Answer 2

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

来自AngularJS documentation on directives：

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

您可以参考AngularUI Bootstrap项目here中的Accordion指令作为示例。

Answer 3

注意

即使我得到了一些指向好方向的答案，但实施这些建议需要额外的功课。我在这里展示我的发现，只要目前的实施。

使用Jeremy Likness's建议，我创建了一个记录所有抽屉的服务。我想出的问题是“如果不是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);
        });         

    }
};  

});