ng-show 在隐藏之前可见

Question

我基本上是在恢复这个问题，但对我来说，它发生在页面加载时略有不同。

//HTML
<h1>Some very serious message here</h1>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-if="text !== ''">
    <label class="alert alert-danger">{{text}}</label>
  </div>
</div>
//JS
var myApp = angular.module('myApp', ["ngAnimate"]);
myApp.controller('MyCtrl', function($scope) {
  $scope.text = '';
});

请参阅 JSFiddle。

为什么我可以看到(即使很快(标签？如果我将ng-if更改为ng-show，也会发生同样的情况。

Answer 1

使用 ng-cloak 指令：

<div ng-app="myApp" ng-controller="MyCtrl" ng-cloak>

这应该有助于在加载之前隐藏AngularJS html模板。https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

问题是在呈现 HTML 时未初始化控制器。你可以像darron614所说的那样使用ng-cloak，以防止你的HTML模板在编译之前显示。

Answer 3

试试 ng-cloak

<h1>
Some very serious message here
</h1>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-if="text !== ''" ng-cloak>
    <label class="alert alert-danger">{{text}}</label>
  </div>
</div>