Question

我在页面加载时遇到了ng-hide的问题，对于登录页面，我使用ng-hide在段落标签中显示错误按摩，但是当页面加载时，我可以看到错误按摩几秒钟之后就消失了。那么，如何解决这种闪烁效应呢？

我也试过ng-cloak，但它没有解决。

HTML：

 <p class="errred"  ng-hide="errMsg" ng-cloak >Account is suspeneded</p>

CSS：

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

控制器：

  if (response == 1)
   vm.errMsg("", null, 'This is not a registered email', null, "bgWht", 
 'Password');
    else if (response == 2) 
    //alert("acoount suuspened");
    vm.errMsg = false;

Answer 1

如果你绝对想避免出现文本的可能性，那么唯一的办法就是不要把它放在DOM中。

让角度加载然后显示将文本放在那里。

以下是您可能的解决方案：

＆＃13;

var app = angular.module('app', []);

app.controller('ctrl', function($scope, $sce) {
  $scope.errMsg = false;
  $scope.accountText = $sce.trustAsHtml(!$scope.errMsg ? 'Account is suspeneded': '');  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<body ng-app="app" ng-controller="ctrl">
  <div class="col-lg-12">
    <input type="checkbox" ng-model="errMsg" /> Error Message <br/>
    <p class="errred" ng-hide="errMsg" ng-cloak >Account is suspeneded</p>
    <p class="errred" ng-bind-html="accountText"></p>
  </div>
</body>

＆＃13;

Answer 2

最好使用ng-if而不是ng-hide。因为当response和make scope值为true时只有那个div

页面加载时如何解决ng-hide闪烁问题？

2 个答案: