我在 bootstrap-ui 文档中没有看到任何关于如何在控制器中使用函数调用打开或关闭元素的函数。
但是,假设在单击引导元素时,我想做一些特别的事情,然后打开或关闭另一个下拉列表:
模板.html
<div dropdown ng-click="customAction()">
<a href class="dropdown-toggle" dropdown-toggle>(down arrow)</a>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
控制器.js
$scope.customAction() = function() {
//doSomething
var otherDropdown = angular.element(/* select other dropdown */);
otherDropdown.open(); //How do I do this?
}
注意:我故意抽象了这个问题,因为我实际要做的比在两个下拉菜单之间进行选择要复杂一些。关键是,除了执行dropDown.addClass('open')
之外,有没有办法通过代码打开下拉列表?我问是因为我注意到这样做,你还必须跟踪dropdown-menu
aria-expanded
属性是真是假;因此,似乎有一个内置函数来处理这个问题。
查看 Angular 指令 for Bootstrap 页面上的下拉示例。有一个按钮示例,用于切换下拉列表的打开状态。
http://angular-ui.github.io/bootstrap/#/dropdown
基本机制是将下拉列表 is-open 属性绑定到范围/视图模型上的属性,然后发生切换该属性值的事件。