Angular UI Bootstrap 响应式菜单-点击关闭时关闭菜单？
Angular UI Bootstrap Responsive menu - closing menu when clicking off it?
我已经使用 Angular UI Bootstrap 成功创建了响应式菜单。问题是：
当响应式菜单打开时，它只能通过重新点击开关来关闭。单击页面上的其他任何位置都会使菜单保持打开状态，这对于我正在构建的网站来说是不可取的。
我正在寻找此功能：
点击菜单以外的任何地方应该关闭菜单，而不是切换它。
如何实现这一目标？我尝试在 html 或 body 元素上设置 ng-click 并查看是否可行，但没有成功。
这实际上很容易解决，只需一点额外的 CSS 和添加的 div.
Plunker Demo
此解决方案的机制非常简单：向导航栏标记添加一个额外的 div，当菜单展开时用作可点击的背景。
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
为确保背景覆盖整个视口，您将使用 position: fixed 并设置 top、right、bottom 和 left 属性到 0。然后你需要确保背景没有覆盖菜单，使你的菜单项不可点击。为此，您需要将其 z-index 设置为 -1。最后，要确保它是 'clickable'，您需要给它一个背景。将 background-color 设置为 transparent 可确保它不会遮挡任何导航栏元素。
接下来您需要做的是确保背景元素仅在菜单展开时显示，否则它会覆盖您的正文内容并且无法与任何内容进行交互。很酷的是 ngClass 指令使这变得简单。您可以使用 isCollapsed 范围变量通过将表达式设置为 isCollapsed === false 来确定何时添加背景 class。最后，添加一个 ng-click 属性来关闭菜单。因此，标记如下所示：
标记：
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
不加背景class时，没有内容的div自然会塌陷到0高度，所以其实不需要隐藏或显示.
请记住，背景 div 必须添加到由管理菜单折叠状态的控制器处理的同一元素。如果它不能访问 isCollapsed 范围变量，它将不会显示并且 ng-click 事件将无效。
您可以通过创建一个简单的自定义指令轻松改进这一点，这样您就不必在标记中添加 div。只需将指令的范围 属性 设置为 true，以便指令可以访问父 isCollapsed 变量。
我已经使用 Angular UI Bootstrap 成功创建了响应式菜单。问题是：
当响应式菜单打开时，它只能通过重新点击开关来关闭。单击页面上的其他任何位置都会使菜单保持打开状态，这对于我正在构建的网站来说是不可取的。
我正在寻找此功能：
点击菜单以外的任何地方应该关闭菜单，而不是切换它。
如何实现这一目标？我尝试在 html 或 body 元素上设置 ng-click 并查看是否可行，但没有成功。
这实际上很容易解决，只需一点额外的 CSS 和添加的 div.
Plunker Demo
此解决方案的机制非常简单：向导航栏标记添加一个额外的 div，当菜单展开时用作可点击的背景。
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
为确保背景覆盖整个视口，您将使用 position: fixed 并设置 top、right、bottom 和 left 属性到 0。然后你需要确保背景没有覆盖菜单，使你的菜单项不可点击。为此，您需要将其 z-index 设置为 -1。最后，要确保它是 'clickable'，您需要给它一个背景。将 background-color 设置为 transparent 可确保它不会遮挡任何导航栏元素。
接下来您需要做的是确保背景元素仅在菜单展开时显示，否则它会覆盖您的正文内容并且无法与任何内容进行交互。很酷的是 ngClass 指令使这变得简单。您可以使用 isCollapsed 范围变量通过将表达式设置为 isCollapsed === false 来确定何时添加背景 class。最后，添加一个 ng-click 属性来关闭菜单。因此，标记如下所示：
标记：
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
不加背景class时，没有内容的div自然会塌陷到0高度，所以其实不需要隐藏或显示.
请记住，背景 div 必须添加到由管理菜单折叠状态的控制器处理的同一元素。如果它不能访问 isCollapsed 范围变量，它将不会显示并且 ng-click 事件将无效。
您可以通过创建一个简单的自定义指令轻松改进这一点，这样您就不必在标记中添加 div。只需将指令的范围 属性 设置为 true，以便指令可以访问父 isCollapsed 变量。