ng-showは隠す前に表示されます

Question

私は基本的にこれを復活させていますが、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-showのng-ifを変更すると同じことが起こります。

Answer 1

NG-マントディレクティブを使用しては：

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

これがロードされる前に、AngularJSのHTMLテンプレートを隠し役立つはずです。 https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

問題は、HTMLがレンダリングされるときにコントローラが初期化されないことです。 darron614は、HTMLテンプレートがコンパイルされる前に表示されないように、ng-cloakを使用することができます。

Answer 3

てみNG-マント

<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>