如何防止未编译的数据被看到，而不使用纳克斗篷？
如何防止未编译的数据被看到，而不使用纳克斗篷？
提问于 2017-01-02 17:46:38
我已经构建了一个web应用程序，并试图将AngularJS框架集成到我的代码中。我已经设置了我的程序，以便我有一个<input type="number"/>和一个带有ng-model="subtotal.subtotal1"指令的<td>元素，以及一个带有数据绑定元素的<td>元素，如下所示。
这个数据绑定表达式中的问题是，当窗口最初加载时，在从我的javascript文件返回实际值之前，您可以简单地看到未编译的数据(这意味着我暂时看到了花括号)。
这里是我为解决我的问题尝试过的：
1.将angular.js CDN文件移动到主体部分的末尾和头部部分。
- 更改了我所包含的javascript文件的顺序
- 使用了
ng-cloak，它不能跨浏览器工作(IE:Google )，看上去该页面有故障。我宁愿不使用指令来解决这个问题，如果我被迫这样做，那么我将使用类似于<td id="one">元素的document.getElementById("one").innerHTML="content"来简单地显示值。虽然我知道不用Angular.js也能做到这一点，但本练习的要点是使用角
我已经将代码包含在<head>部分和<body>部分，这可能是问题所在(数据绑定、指向javascript文件的链接以及相应的javascript文件(包括角码))。
头
<html ng-app="myModule1">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="vex/dist/css/vex.css"/>
<link rel="stylesheet" type="text/css" href="vex/dist/css/vex-theme-os.css"/> <br><br>div标签：
(此标记包含在body标记中，包括ng-controller、<input type="number" ng-model="subtotal.subtotal1"/>和相应的<td>{{1.99*subtotal.subtotal1}}</td>：
<div class="container" ng-controller="mycontroller1">
<table class="table table-hover table-condensed">
<form id="medication-product-1" method="POST">
<tbody>
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2">
<img id="small-pic2" src="images/benadryl.png"></img>
</div>
<div class="col-sm-10">
<h4 class="nomargin"><input type="hidden" name="name1" value="Benadryl">
Benadryl</input>
</h4>
<p>
A medication which reduces itching, sneezing, coughing through because of its properties as an anti-histamine.
</p>
</div>
</div>
</td>
<td data-th="Price"><input type="hidden" name="Price1" value=01.99>
$1.99</input>
</td>
<td data-th="Quantity">
<input type="number" ng-model="subtotal.subtotal1" ng-init="subtotal.subtotal1=0" name="Quantity1" ng-change="changed()" id="amount1" class="form-control text-center" min="0"/>
</td>
<td data-th="Subtotal" id="subtotal-1" name="Subtotal" class="text-center">{{1.99*subtotal.subtotal1}}</td>
<td>
<input type="hidden" name="step" value="1"></input>
<button type="button" id="button1" name="button-1" class="btn btn-primary">
Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</td>
</tr>
</form>
<form id="medication-product-2" method="POST">
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2">
<img src="images/motrin.jpg" id="small-pic"></img>
</div>
<div class="col-sm-10">
<h4 >
<input type="hidden" name="name2" value="Motrin"></input>
Motrin
</h4>
<p>
Pain Reliever and Fever Reducer
</p>
</div>
</div>
</td>
<td data-th="Price">
<input type="hidden" name="Price2" value="3.99">
$3.99
</input>
</td>
<td data-th="Quantity">
<input type="number" ng-model="subtotal.subtotal2" ng-change="changed2()" ng-init="subtotal.subtotal2=0" name="Quantity2"
id="amount2" min="0" class="form-control text-center"></input>
</td>
<td data-th="Subtotal" id="subtotal-2"
name="Subtotal" class="text-center" >{{3.99*subtotal.subtotal2}}
</td>
<td>
<input type="hidden" name="step" value="2"></input>
<button type="button2" id="button2" name="button-2" class="btn btn-primary">
Add To Cart<span class="glyphicon glyphicon-shopping-cart"></span>
</button>
</td>
</tr>
</tbody>
</form>
</table>
</div>主体标签的末端：
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script type="text/javascript" src="js/medication.js"></script>
<script type="text/javascript" src="vex/dist/js/vex.combined.js"></script>
<script type="text/javascript" vex.defaultOptions.className = 'vex-theme-os'></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/signout.js"></script>
</body>medication.js: javascript文件中包含角码的部分.
window.onload=function(){
button1=document.getElementById("button1");
button2=document.getElementById("button2");
number1=document.getElementById("amount1");
number2=document.getElementById("amount2");
number2.value=0;
number1.value=0;
button1.disabled=true;
button2.disabled=true;
var medicine=angular.module("myModule1",[])
.controller("mycontroller1",function($scope){
var subtotal={
subtotal1:0,
subtotal2:0
}
$scope.subtotal=subtotal;
$scope.changed=function(){
if(subtotal.subtotal1>0){
button1.disabled=false;
}
else {
button1.disabled=true;
}
}
$scope.changed2=function(){
if(subtotal.subtotal2>0){
button2.disabled=false;
}
else{
button2.disabled=true;
}
}
});同样，我不知道为什么我能在td元素中看到大括号。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-02 18:31:28
可以使用ng-bind而不是{{}}，但我发现编写{{}}更容易，只需使用ng-cloak，因为它是为此目的而设计的。
只需在树中增加足够高的ng斗篷，这样就不必将它添加到很多元素中。
变化
<td>{{1.99*subtotal.subtotal1}}</td>至
<td ng-bind="(1.99*subtotal.subtotal1)"></td>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41431156
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号