Question

我正在尝试使用angularJS的指令创建一个下拉菜单，到目前为止看起来像这样：

<div class="dropdown">
  <button class="button">Dropdown</button>
  <ul>
    <li><a>Menu Item 1</a></li>
    <li><a>Menu Item 2</a></li>
  </ul>
</div>

这是html布局，这是迄今为止的指令：

myApp.directive('dropdown', function($parse) {
    return {
        restrict: "C",
        link: function(scope, elem, attr) {

            var isDisabled = $parse(attr.ngDisabled);

            var toggleMenu = function() {
                if(!elem.hasClass('dropdown-active') && !isDisabled(scope))
                    elem.addClass('dropdown-active');
                else
                    elem.removeClass('dropdown-active');
            };

            elem.bind('click', toggleMenu);

        }
    }
});

到目前为止它的工作原理，当我按下按钮时，列表打开，当我再次按下它关闭但现在我有一个问题..我需要让它关闭当我按下拉下来之外的任何地方。

我可以不使用jQuery吗？我正试图用AngularJS做这个项目。

先谢谢你，丹尼尔。

链接到Plunker（这里我有一个问题，当我按下一个下拉列表，另一个没有关闭）

http://plnkr.co/edit/OrfUVg8KsOhAxqLwn1li?p=preview

Answer 1

我找到了一种方法来实现这一点，我所做的是我使用一个类'active-recent'而不是关闭所有打开的菜单，期望有一个这个类，并且紧接着，我删除了最近所以下次当我按下其他下拉列表时，最后一个也会关闭。

myApp.directive('dropdown', function($document) {
    return {
        restrict: "C",
        link: function(scope, elem, attr) {

            elem.bind('click', function() {
                elem.toggleClass('active');
                elem.addClass('active-recent');
            });

            $document.bind('click', function() {
                if(!elem.hasClass('active-recent')) {
                    elem.removeClass('active');
                }
                elem.removeClass('active-recent');
            });

        }
    }
});

http://plnkr.co/edit/wzJkSb0bU53t7liOoVJZ?p=preview

Answer 2

这是我作为一年前的测试而做的，最初没有“点击任何地方关闭”功能。我只是分叉它并使用了JqueryUI的技术，并创建了一个具有ng-show和ng-click的叠加div。它有点粗糙，你可以把它搞砸了。但它的确有效：

app.directive("dropdown", function() {
  return {
    restrict: 'A',
    link: function(scope) {
      scope.showDropdown = function() {
        if (scope.showList) {
          scope.showList = false;
          scope.overlay = false;
        }
        else {
          scope.showList = true;
          scope.overlay = true;
        }
      }
    }
  }
});

下拉HTML：

<div class="overlay" ng-show="overlay" ng-click="showList = false;overlay = false;"></div>
<div class="btn btn-info" ng-click="showDropdown()" dropdown>{{selectedCar}} <i class="caret"></i></div>
  <div class="drop-down" ng-show="showList" dropdown-options ng-transclude>
    <ul> 
      <li ng-repeat="car in viewModel"><a href="" ng-click="selectItem(car.n)">{{car.n}}</a></li>
    </ul>
  </div>
</div>

叠加CSS：

.overlay { background:transparent; width:100%; height:100%; position:absolute; top:0; left:0; }

Plunkr：

http://plnkr.co/edit/5IpClw?p=preview

Answer 3

我使用了一个下拉列表，如果你将光标移到下拉列表之外，它会自动关闭。你可以尝试这个

  <ul class="nav navbar-nav">
                    <li class="dropdown" >
                        <button class="dropdown-toggle  form-control" data-toggle="dropdown" >
                            {{selectedParent.displayName}}<span class="caret"></span>
                        </button>
                        <div class="dropdown-menu">

                            /*Your drop down list here*/
                        </div>
                    </li>
                </ul>

希望它有用！

Answer 4

angular-downdown指令是另一种方法。它可以从github上获得

https://github.com/jseppi/angular-dropdowns

它可以用于选择选项样式或带有下拉菜单的按钮。

Answer 5

警告：更改事件函数必须位于控制器内部，以便在不触及指令的情况下进行更好的修改。

＆＃13;

var app = angular.module('main', []);
app.controller('exampleCtrl', exampleCtrl);
exampleCtrl.$inject = [];
function exampleCtrl(){
  var vm = this;
  vm.testData = ['one', 'two', 'three'];
  vm.selectedItem = vm.testData[0];
  vm.changeEvent = function (item){
    vm.selectedItem = item;
  }
}
app.directive('uiDropdown', uiDropdown);
uiDropdown.$inject=[];
function uiDropdown (){
  return {
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {
      var ulDropdown = element.next("[ui-dropdown-data]");
      element.on('click', function() { // Click on ui-dropdown
        ulDropdown[0].style.display = ulDropdown[0].style.display === 'none' ? 'block' : 'none';
      });
      ulDropdown.on('click', function (data) { //click on ui-dropdown-data
        ulDropdown[0].style.display = 'none';
      });
      element.parent().on('mouseleave', function () { // leave parent div
        ulDropdown[0].style.display = 'none';
      });
    }
  };
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main">
  <div ng-controller="exampleCtrl as vm">
    <div ui-dropdown style="cursor:pointer; border:1px solid; width:50px;">{{vm.selectedItem}}</div>
    <ul style="display: none" ui-dropdown-data>
      <li style="border:1px dotted;width:50px; cursor:pointer" ng-repeat="item in vm.testData" ng-click="vm.changeEvent(item)">{{item}}</li>
    </ul>
    <div>
</div>

＆＃13;

角度下拉指令

5 个答案: