Question

我正在尝试从我的网站中删除{{ }}。基本上如果角度没有加载就会出现。所以，我检查了SO并找到了使用ng-cloak的答案。我试过了，但我仍然可以看到{{ }}。我将CSS代码添加到CSS文件中以及页面本地。

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>

关于我做错了什么建议？

Answer 1

在根级别应用ng-cloak，您提到了ng-app指令。（可能是html标签），我建议完全避免ng-cloak，并开始使用ng-bind。它将解决您{{}} interpolation operator

闪烁的问题

Answer 2

您应该将ng-cloak应用于单个元素。将其应用于根标记也可以解决您的问题，但可能会导致其他问题。引自ngCloak doc：

该指令可以应用于<body>元素，但首选用法是将多个ngCloak指令应用于页面的一小部分，以允许逐步呈现浏览器视图。

还要记住以下几点：

为了获得最佳结果，必须在html文档的head部分中加载angular.js脚本;或者，上面的css规则必须包含在应用程序的外部样式表中。

Answer 3

对不起，伙计们，这是一个愚蠢的错误。

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

真的很傻。一个非常基本的。我希望有人会遇到这些有趣的情况。

ng-cloak在Angular中不起作用

3 个答案: