为什么在锚点上使用 ng-click 时导航栏菜单会闪烁？

Question

我认为我在输入时很聪明：

<li><a ng-click="navCollapsed = !navCollapsed" href="#/">Home</a></li>

作为我的导航列表项 - 为了自动关闭菜单（在小型设备上）。

这非常有效，除了当您不在小型设备上时，导航会闪烁（重新加载）。

有谁知道为什么？有解决办法吗？

JSfiddle of the Problem HERE - 重新调整 html 输出的大小 window...

Answer 1

它在折叠过程中将高度设置为零，然后通过过渡将其重置。它还在改变侧边距。您可能需要合并媒体查询以强制高度和填充保持一致。

这是一个开始。可能有一种更编程的方式来做到这一点，但它有效。

@media (min-width: 768px) {
    .navbar-collapse {
        height: auto !important;
        padding-left: 0 !important;
    }
}

Demo

Answer 2

我刚刚用一个小函数解决了这个问题，该函数在反转 isCollapsed 值之前检查屏幕尺寸。

之前

HTML

<div role="navigation" ng-click="isCollapsed = !isCollaped" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" uib-collapse="isCollapsed">

JS

$scope.isCollapsed = true;

之后

HTML

<div role="navigation" ng-click="collapse()" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" uib-collapse="isCollapsed">

JS

$scope.isCollapsed = true;

$scope.collapse = function(){
    if(window.innerWidth < 820){
        $scope.isCollapsed = !$scope.isCollapsed;
    }
};

为什么在锚点上使用 ng-click 时导航栏菜单会闪烁？

Why does the navbar menu flash when using a ng-click on an anchor?

angularjs

angular-ui-bootstrap