javascript 角度下拉指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23483458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular dropdown directive
提问by Pacuraru Daniel
i am trying to create a dropdown menu using directives from angularJS and so far it looks like this:
我正在尝试使用来自 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>
This is the html layout and this is the directive so far:
这是 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);
}
}
});
So far it works, when i press on the button, the list opens and when i press again it closes but now i have a problem.. i need to make it to close when i press anywhere outside the dropdown.
到目前为止它有效，当我按下按钮时，列表打开，当我再次按下它关闭但现在我有一个问题..我需要在我按下下拉菜单外的任何地方时关闭它。
Can i do that without using jQuery? I am trying to do this project with just AngularJS.
我可以在不使用 jQuery 的情况下做到这一点吗？我正在尝试只用 AngularJS 来做这个项目。
Thank you in advance, Daniel.
提前谢谢你，丹尼尔。
Link to Plunker (here i have a problem, when i press on a dropdown, the other one doesnt close)
链接到 Plunker（这里我有一个问题，当我按下一个下拉菜单时，另一个没有关闭）
回答by Pacuraru Daniel
I found a way to make this happen, what i did is i use a class 'active-recent' and than just close all the opened menus expect the one that has this class, and just right after, i remove the recent class, so next time when i press on other dropdown, this last one closes aswell.
我找到了一种方法来实现这一点，我所做的是我使用了一个“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');
});
}
}
});
回答by Mike_Laird
The angular-dropdowns directive is another way to go. Its available from github at
angular-dropdowns 指令是另一种方法。它可以从 github 获得
https://github.com/jseppi/angular-dropdowns
https://github.com/jseppi/angular-dropdowns
It can be used in a select option style or as a button with a menu of dropdowns.
它可以用于选择选项样式或作为带有下拉菜单的按钮。
回答by un.spike
warning: changeEvent function must be inside controller for better modification without touching directive.
警告：changeEvent 函数必须在控制器内部才能更好地修改而无需触及指令。
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';
});
}
};
}<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>回答by mnsr
This is from something i made as a test about a year back which originally didn't have the 'click anywhere to close' functionality in it. I just forked it and used JqueryUI's technique, and created an overlay div that has an ng-show, and ng-click. It's a bit rough, and you can neaten it up. But it works:
这是我大约一年前作为测试所做的一些事情，它最初没有“单击任何地方以关闭”功能。我只是将它分叉并使用了 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;
}
}
}
}
});
Dropdown HTML:
下拉 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>
overlay CSS:
叠加 CSS：
.overlay { background:transparent; width:100%; height:100%; position:absolute; top:0; left:0; }
Plunkr:
普朗克：
回答by Jyoti Kumari
I have used a dropdown in which if you take the cursor outside the dropdown it closes automatically.You can try this
我使用了一个下拉菜单，如果你将光标移到下拉菜单之外，它会自动关闭。你可以试试这个
<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>
Hope it's helpful!
希望它有帮助！
