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

Is it possible to access instances of a directive from inside the directive definition?

本文关键字：指令 访问 实例 内部 定义 是否      更新时间：2023-09-26

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

这是我当前的代码：

标记 

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

抽屉.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);
        }
    };
});
打开

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

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

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

来自 AngularJS 关于指令的文档：

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

您可以在此处参考作为 AngularUI Bootstrap 项目一部分的 Accordion 指令作为示例。

注意

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

根据Jeremy Likness的建议，我创建了一个记录所有抽屉的服务。我想出的问题是"如果不是 DOM，什么是抽屉？经过一些阅读，我发现我可以使用指令定义上的scope: true选项为每个抽屉创建一个特定的范围，因此每个范围实例都引用其相应的抽屉。

抽屉.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);
        });         
    }
};  
});
相关文章：