Question

我尝试过以下操作，但在使用ng-show时仍然会出现闪烁：Angularjs - ng-cloak/ng-show elements blink

我正在使用模板加载我的顶级导航，如下所示：

<div data-ng-controller="userInfoCtrl">
   <a href="#!home">Home</a>
<a href="#!add-item">Add Item</a>
<a href="#!settings" data-ng-show="display">Settings</a>

这是我的控制器：

   // User Info
appControllers.controller('userInfoCtrl', ['$scope', 'appAdminCheck', function ($scope, appAdminCheck) {

    // Set value for using ng-show/ng-hide
    appAdminCheck().then(function (isAdmin) {
        if (isAdmin == true) {
            $scope.display = true;
        }
    });
}]);

Answer 1

试试这个，

将ng-class与style='visibility: hidden'一起使用，

<a href="#!settings" style="visibility: hidden" ng-class='{forceShow: display}'>Settings</a>

style="visibility: hidden"最初会隐藏<a>，当display到达true时，forceShow将<a>添加ng-class }，

并在visibility: visible，

时强制$scope.display == true

<style>
    .forceShow {
      visibility: visible !important;
    }
</style>

这是Demo Plunker

Answer 2

我找到了这个问题。我在每个视图中都将导航作为模板加载，因此当我更改路径时，它会导致ng-show项目闪烁。将模板移动到我的索引页面解决了这个问题，因为它被加载一次。例如：

 <%--Container for HTML, inclusive of AngularJS App and responsive aspects--%>
<div class="container">

    <%--Include top menu--%>
    <div data-ng-include="'../Templates/topmenu.html'"></div>

    <%--Load Angular Views--%>
    <div data-ng-view></div>

    <%--Footer of page. Could be an include as well--%>
    <hr>
    <footer></footer>
</div>

Ng-Show导致闪烁

2 个答案: