ng-show显示页面完成加载之前的内容

Question

我正在使用这种非常简单的方法在隐藏和显示一些内容之间切换：

<a ng-click="cred=!cred" href="javascript:void(0)" style="text-decoration:none;"><strong>Admin Credentials</strong></a><br />
<p class="lead check-element animate-show-hide" ng-show="cred">User Name: <strong>Mohamed</strong><br /> Password: <strong>password</strong></p>

控制器还没有代码。但是我注意到，当页面加载时，lead类的内容显示为毫秒，然后它消失了吗？但这不是我所需要的，我认为。我希望它最初是隐藏的，但是似乎Angular在等待页面完成加载，然后应用ng-show表达式！

Answer 1

ng-show项目（如果不需要）之前加载之前。

ng-cloak以及必要的CSS应该用于隐藏它们，直到知道是否需要元素为止。

    [ng:cloak], [ng-cloak], .ng-cloak {
        display: none !important;
    }

Answer 2

在这种情况下，请使用 ng-if避免CSS动画。ng-show和ng-hide正在触发类操作以与您的CSS动画相互作用。如果加载页面后仍然需要CSS动画，则需要将第二个$scope绑定为"显示/hide"，以" show/hide"，以" after page load处理"。

<p class="lead check-element animate-show-hide" ng-if="cred" ng-show="toggle">
     User Name: <strong>Mohamed</strong><br /> 
     Password: <strong>password</strong>
</p>

第二种方法是在不需要的情况下不要将CSS动画绑定到您的元素中。这将避免动画。在这种情况下，您不需要使用ng-if（但它可能会打破您的"隐藏"动画）。

<p class="lead check-element" ng-class="{'animate-show-hide': cred }" ng-show="cred">
     User Name: <strong>Mohamed</strong><br /> 
     Password: <strong>password</strong>
</p>