javascript - 访问同级的隔离范围是由相同的 Angular Directive(指令)产生的

Question

我有一个 angularjs 指令，它将生成一个带有稍微复杂的模板的多选下拉列表。这些指令具有独立的范围。根据下拉列表，单击下拉列表中名为 open 的变量进行切换并调整可见性。目前，只有单击 DOM 时，下拉菜单才会关闭。但是，如果用户依次单击两个下拉菜单，则两个下拉菜单都会保持打开状态。我们可以通过访问其范围并设置 open 的值来关闭同级下拉列表。 如何访问源自同一指令的同级的隔离范围？

var directiveModule = angular.module('angular-drp-multiselect', []);
directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', '$parse',
function ($filter, $document, $compile, $parse) {

    return {
        restrict: 'AE',
        scope: {
            selectedModel: '=',
            options: '=',
            extraSettings: '=',
            events: '=',
            searchFilter: '=?',
            translationTexts: '=',
            groupBy: '@'                
        },
        template: function (element, attrs) {
            var checkboxes = attrs.checkboxes ? true : false;
            var groups = attrs.groupBy ? true : false;

            var template = '<div class="multiselect-parent btn-group dropdown-multiselect btn-block ">';
            template += '<button type="button" ng-disabled="getDisableStatus()" class="dropdown-toggle btn-block btn-leftAlign" ng-class="settings.buttonClasses" ng-click="HideAllOpenDropDowns();toggleDropdown($event)" ng-attr-title="{{getButtonTitle()}}">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
            template += '<ul class="dropdown-menu dropdown-menu-form" ng-data="{{open}}"  ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: scroll" >';
            template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()">  {{texts.checkAll}}</a>';
           .....
            element.html(template);
        },
        link: function ($scope, $element, $attrs) {
            var $dropdownTrigger = $element.children()[0];

            $scope.toggleDropdown = function () {
            //here I need to access all siblings(generated from the same directive) scope , to control the visibility, by setting value for $scope.open
            //I tried the following things
            --------------------------------------
            //Attempt 1- not working
            angular.forEach(angular.element($element.parent().parent().children()), function (value, key) {
                var x = angular.element(value).scope();
                    x.open = false;
                     //x.$apply(function () {
                        // x.open = false;
                     //});
                     }
            //Attempt  2- not working
            angular.forEach(angular.element($(".multiselect-parent")), function (value, key) {

                var menuElem = angular.element(value);
                var menuElemScope = menuElem.scope();
                menuElemScope.$apply(function () {
                    menuElemScope.open = false;
                });
            });


            --------------------------------------
              $scope.open = !$scope.open;
            };
            ...
            ...

html 是

<div ng-app="multiSelectApp">
        <div ng-controller="MultiSelect">

        <div ng-dropdown-multiselect="" 
            extra-settings="DropDownSettings1" >
        </div>

        <div ng-dropdown-multiselect="" 
            extra-settings="DropDownSettings2" >
        </div>

        <div ng-dropdown-multiselect="" 
            extra-settings="DropDownSettings3" >
        </div>

        </div>

        </div>

Answer 1

我发现搜索 DOM 元素会影响同级指令，而不是 Angular 方式。

你可以做这样的事情

link: function(element, attrs){
    ....
    $rootScope.$on('openChanged', function(event, open){
        scope.isOpen = open;
    });
    scope.toggleOpen = function(){
        var wasOpen = scope.isOpen;
        $rootScope.$broadcast('openChanged', false);
        scope.isOpen = !wasOpen;
    }

但是，对于大型应用程序，我建议实现通信服务，而不是使用 $rootScope。

Fiddle举个例子

更新
关于服务实现。
我的建议是不要重新发明轮子并使用 https://www.npmjs.com/package/angular-event-emitter 。

但是，有一个快速的解决方案可以实现像

.factory('broadcastService', function () {
    var handlers = {};
    this.on = function (eventName, callback) {
        var callbacks = handlers[eventName];
        if (!callbacks) {
            handlers[eventName] = callbacks = [];
        }
        if (typeof callback === 'function' && callbacks.indexOf(callback) < 0) {
            callbacks.push(callback);
        }
    };
    this.broadcast = function (eventName, args) {
        var callbacks = handlers[eventName];
        if (callbacks) {
            callbacks.map(function (handler) {
                try {
                    handler({
                        name: eventName
                    }, args);
                } catch (ex) {
                    console.error(ex);
                }
            });
        }
    }
})