ng-cloak在Angular中不起作用 [英] ng-cloak not working in Angular
问题描述
我正在尝试从我的网站中删除 {{}} .基本上，如果没有加载角度，它就来了.因此，我检查了SO，并找到了一些使用 ng-cloak 的答案.我尝试过，但仍然可以看到 {{}} .我将下面的CSS代码添加到了CSS文件中，以及在页面上的本地添加了.
I am trying to remove {{ }} from my website. Basically it came if angular didn't load. So, I checked SO and found some answer to use ng-cloak. I tried that but I can still see {{ }}. I added the CSS code below in a CSS file as well as locally on the page.
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>
关于我在做什么错的任何建议?
Any advice as to what am I doing wrong?
推荐答案
您应将 ng-cloak 应用于各个元素.将其应用于root标记也可以解决您的问题，但可能会导致其他问题.引自 ngCloak文档:
You should apply ng-cloak to individual elements. Applying it to the root tag will also solve your problem but it might cause other problems. Quoted from ngCloak doc:
该指令可以应用于
< body>元素，但是首选用法是对页面的一小部分应用多个ngCloak指令以允许渐进式渲染浏览器视图.
The directive can be applied to the
<body>element, but the preferred usage is to apply multiplengCloakdirectives to small portions of the page to permit progressive rendering of the browser view.
还请记住以下几点:
为了获得最佳结果，必须将angular.js脚本加载到html文档的头部；或者，必须将上述css规则包含在应用程序的外部样式表中.
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
这篇关于ng-cloak在Angular中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
