angular-bootstrap 드롭다운이 닫히지 않도록 하는 방법(지령에 의해 바인딩된 이벤트 언바인드)

angular-bootstrap 드롭다운이 닫히지 않도록 하는 방법(지령에 의해 바인딩된 이벤트 언바인드)

Angular-Bootstrap Dropdown을 사용하고 있습니다.사용자가 의도적으로 닫을 때까지 클릭 시 닫히지 않도록 합니다.

기본 상태는 다음과 같습니다.문서에서 원하는 위치를 누르면 드롭다운이 닫힙니다.

관련 코드 행을 특정했습니다(12행, dropdown.js).

this.open = function( dropdownScope ) {
   if ( !openScope ) {
     $document.bind('click', closeDropdown); // line to unbind
     $document.bind('keydown', escapeKeyBind);
   }
}

자세한 코드는 여기에서 찾을 수 있습니다.Github 링크

업데이트를 위해 프로젝트를 열어두기 위해 각도 부트스트랩의 원래 소스를 변경하지 않을 것입니다.

질문입니다.

Angular Controller에서 지침에 따라 문서에 바인딩된 이벤트를 해제하려면 어떻게 해야 합니까?

나는 이것을 나의 드롭다운 메뉴에 추가해서 해결했다.이렇게 하면 드롭다운을 여는 태그를 클릭하지 않으면 드롭다운이 닫히지 않습니다.

<ul class="dropdown-menu" ng-click="$event.stopPropagation()">

Angular UI-Bootstrap 0.13.0 이후 버전을 사용하는 사용자를 위해 UI-Bootstrap 설명서에 기재되어 있는 보다 명확한 방법을 소개합니다.

디폴트로는 드롭다운의 요소 중 하나를 클릭하면 자동으로 닫힙니다.자동 닫기 옵션을 다음과 같이 설정하면 이 동작을 변경할 수 있습니다.

• 항상 - (기본값) 요소를 클릭하면 드롭다운이 자동으로 닫힙니다.

• outsideClick - 사용자가 드롭다운 외부에 있는 요소를 클릭할 때만 드롭다운을 자동으로 닫습니다.

• disabled - 자동 닫기를 비활성화합니다.그런 다음 is-open을 사용하여 드롭다운의 열기/닫기 상태를 수동으로 제어할 수 있습니다.토글을 클릭하거나 esc 키를 누르거나 다른 드롭다운을 열어도 드롭다운은 닫힙니다.$locationChangeSuccess 이벤트 드롭다운은 닫히지 않습니다.

다음은 매뉴얼 링크입니다.https://angular-ui.github.io/bootstrap/ # / http:/filename

이벤트 전파를 추가하여 각도 2 이상의 DOM 트리에서 이벤트가 버블하지 않도록 할 수 있습니다.예: (클릭)="$event.stopPropagation()"

이것은 다른 해킹이지만 전환 이벤트가 전파되지 않도록 지시하는 기능을 추가할 수 있습니다.예를 들어 다음과 같은 기능이 특정 사용 사례에 적용되었습니다.

<div>
<div class="btn-group" dropdown is-open="status.isopen" ng-controller="DropDownCtrl">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-click="goToPage('Action')">Action</li>
    <li disable-auto-close>Don't Dismiss</li>
    <li ng-click="goToPage('SomethingElse')">Something else here</li>
  </ul>
</div>

이 디렉티브를 요소에 추가하면 자동 닫기 동작이 비활성화됩니다.

angular.module('plunker', ['ui.bootstrap'])
.controller('DropDownCtrl', ['$scope', '$location',
function($scope, $location) {
  // Controller logic here
  $scope.goToPage = function(page) {
    console.log("Going to " + page + ". Dropdown should close");
    $location.path(page);
  };
}])
.directive('disableAutoClose', function() {
  // directive for disabling the default
  // close on 'click' behavior
  return {
        link: function($scope, $element) {
            $element.on('click', function($event) {
                console.log("Dropdown should not close");
                $event.stopPropagation();
            });
        }
    };
});

여기서의 플런커 예시

이것은 그것을 무시하기 위한 조잡한 방법이다.is-open Atribut을 수동으로 제어하고 on-toggle 이벤트를 하이잭해야 합니다.예:

<div class="btn-group" dropdown is-open="ctrl.isOpen" on-toggle="toggled(open)">
    <button type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

컨트롤러:

    $scope.toggled = function (open) {
        $timeout(function () {
            $scope.ctrl.isOpen = true;
        });
    };

영속적인 솔루션의 dropdownConfig 상수(autoClose 등)에 대한 속성을 요구합니다.

이것은 Rob Jacobs의 답변에 근거한 보다 조잡한 방법으로, 다음과 같은 코멘트가 있는 ulilcht의 추악한 점멸을 방지합니다.

    $scope.toggled = function (open) {
        $scope.open = true;
        var child = $scope.$$childHead;
        while (child) {
            if (child.focusToggleElement) {
                child.isOpen = true;
                break;
            }
            child = child.$$nextSibling;
        }
    };

이 솔루션도 사용할 수 있습니다.https://gist.github.com/Xspirits/684beb66e2499c3ff0e5 필요에 따라 드롭다운을 제어할 수 있습니다.

지시문을 장식할 수 있습니다.

이렇게 하면 원래 코드를 터치할 필요가 없고 원래 동작을 유지할 수 있습니다.

드롭다운 안에 닫기 버튼을 넣을 수 있습니다.

HTML

<div class="dropdown-menu keep-dropdown-open-on-click" role="menu">
    <i class="icon-close close-dropdown-on-click"></i>
</div>

JS

angular.module('app').config(uiDropdownMenuDecorate);
uiDropdownMenuDecorate.$inject = ['$provide'];
function uiDropdownMenuDecorate($provide) {

    $provide.decorator('dropdownMenuDirective', uiDropdownMenuDecorator);

    uiDropdownMenuDecorator.$inject = ['$delegate'];

    function uiDropdownMenuDecorator($delegate) {

        var directive = $delegate[0];
        var link = directive.link;

        directive.compile = function () {
            return function (scope, elem, attrs, ctrl) {
                link.apply(this, [scope, elem, attrs, ctrl]);
                elem.click(function (e) {
                    if (elem.hasClass('keep-dropdown-open-on-click') && !angular.element(e.target).hasClass('close-dropdown-on-click')) {
                        e.stopPropagation();
                    }
                });
            };
        };

        return $delegate;
    }
}

승인된 각도 부트스트랩 자동 닫기 방식을 사용한 코드는 다음과 같습니다.의 auto-close Attribute에 .<div>.

<div class="btn-group" uib-dropdown auto-close="disabled">
    <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <textarea class="form-control" ng-model="description" rows="4" placeholder="Description"></textarea>
    </ul>
</div>

언급URL : https://stackoverflow.com/questions/23698316/how-to-prevent-an-angular-bootstrap-dropdown-from-closing-unbind-event-which-wa