ng-cloak不能在Angular中工作

我想從我的網站中刪除{{ }}。基本上來說，如果角度沒有加載。所以，我查了一下，發現了一些使用ng-cloak的答案。我試過了，但我仍然可以看到{{ }}。我在CSS文件中添加了以下CSS代碼，並在本地添加了該頁面。ng-cloak不能在Angular中工作

CSS

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

這裏是形式。

<form name="register" method="post" id="register" role="form" ng-submit="registerForm()"> 
<div class="form-group" ng-class="{ 'has-error' : erroractype }">  
     <select id="actype" name="actype" class=" selector form-control" ng-model="formData.actype" required="required"> 
      <option value="" selected="selected" >I am</option> 
      <option value="1"> Student</option> 
      <option value="2"> Teacher</option> 
      <option value="3"> School</option> 
      </select> 
<span class="help-block" ng-show="errorName" class="ng-cloak">{{ erroractype }}</span> 
</div> 

<div class="form-group" ng-class="{ 'has-error' : errorFname }"> 

<input type="text" id="fname" name="fname" placeholder="First Name" title="Please Enter Your First Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Fname"> 
<div class = "alert alert-danger" ng-show="errorFname" class="ng-cloak">{{errorFname}}</div> 

</div> 

<div class="form-group" ng-class="{ 'has-error' : errorLname }"> 
<input type="text" id="lname" name="lname" placeholder="Last Name" title="Please Enter Your Last Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Lname"> 
<div class = "alert alert-danger" ng-show="errorLname" class="ng-cloak">{{ errorLname }}</div> 
</div> 

<div class="form-group" ng-class="{ 'has-error' : errorEmail1 }"> 
<input type="email" id="email1" name="email1" placeholder="Email" class="form-control input-sm textbox1" title="Please Enter Your Valid Email" required="required" ng-model="formData.Email1"> 
<div class = "alert alert-danger" ng-show="errorEmail1" class="ng-cloak">{{ errorEmail1 }}</div> 
</div> 

<div class="form-group" ng-class="{ 'has-error' : errorPassword1 }"> 
<input type="password" name="password1" id="password1" placeholder="Password" title="Please enter AlphaNumeric value" class="form-control input-sm textbox1" required="required" ng-model="formData.Password1"> 
<div class = "alert alert-danger" ng-show="errorPassword1" class="ng-cloak">{{ errorPassword1 }}</div> 
{{ errorPassword1 }} 
</div> 

<div class="form-group" ng-class="{ 'has-error' : errormobile }"> 
    <input type="text" id="mobile" name="mobile" placeholder="Mobile Number (+1)" title="Please Enter Your Contact Number without Coutry Code." class="form-control input-sm textbox1" required="required" ng-model="formData.mobile"> 
    <div class = "alert alert-danger" ng-show="errormobile" class="ng-cloak">{{ errormobile }}</div> 
</div> 

<div class="form-group"> 
<button type="submit" class="btn btn-home" name="btn-register" id="btn-register" required="required">Register</button> 
</div> 
</form>

任何意見，我在做什麼錯了？

來源

2017-04-01 Ironic

如果角度沒有加載，你是什麼意思？ – tcrite

你能舉一個顯示什麼的例子嗎？ – tcrite

就像我說當頁面加載第二秒的時候顯示{{errorFname}}和{{}} – Ironic

在根級別應用ng-cloak，您在此提及您的ng-app指令。（可能是html標籤），進一步我建議完全避免ng-cloak，並開始使用ng-bind。它將解決您的閃爍問題{{}} interpolation operator

來源

2017-04-01 15:53:01 anoop

感謝您的回答。讓我嘗試。投了票。 – Ironic

您應該將ng-cloak應用於單個元素。將它應用到根標籤也將解決您的問題，但它可能會導致其他問題。從ngCloak doc引述：

該指令可以被施加到<body>元件，但優選的使用量是應用多個ngCloak指令的頁面的一小部分，以允許瀏覽器視圖的漸進式渲染。

也請記住以下幾點：

爲了獲得最佳結果，angular.js腳本必須在HTML文檔的頭部被加載;或者，上面的CSS規則必須包含在應用程序的外部樣式表中。

來源

2017-04-01 16:32:43 ayushgp

角度添加在頭部。頭部還添加了自定義樣式。你可以看到ng-cloak被添加到單獨的元素中。 – Ironic

@CalculatingMachine你還在看大括號？ – ayushgp

是的，我仍然看到他們。 – Ironic

對不起大家，那是一個愚蠢的錯誤。

<div class = "alert alert-danger" ng-show="errorEmail1" class="ng-cloak">{{ errorEmail1 }}</div>

需要像這樣改變。

<div class = "alert alert-danger ng-cloak" ng-show="errorEmail1" >{{ errorEmail1 }}</div>

這真的很愚蠢。一個非常基本的。我希望有人會遇到這種有趣的情況。

來源

2017-04-01 17:36:28 Ironic

ng-cloak不能在Angular中工作

回答

相關問題