0
我已经构建了一个Web应用程序，并试图将AngularJS框架合并到我的代码中。我已经建立了我的程序，以便我的<input type="number"/>的ng-model="subtotal.subtotal1"指令和<td>元素的数据绑定元素如下{{subtotal.subtotal1}}。
这个数据绑定表达式中的问题是，当窗口最初加载时，你可以在从我的javascript文件返回实际值之前短暂地看到未编译的数据（这意味着我暂时看到大括号）
这是我试过的为了解决我的问题：
1.将angular.js CDN文件移动到正文部分的结尾处和头部部分。
2.更改了我已包含的javascript文件的顺序
3.使用了ng-cloak，它不能跨浏览器（IE：Google Chrome）工作，看起来好像页面有故障。我宁愿不使用指令来解决这个问题，如果我被迫这样做，那么我会采用如下方式简单地在<td id="one">元素中显示值：document.getElementById("one").innerHTML="content"。虽然我知道我能做到这一点，而不Angular.js的点这个练习就是用角
我已经包含在<head>部分和<body>部分代码这有可能是问题（数据绑定，链接JavaScript文件和相应的JavaScript文件包括角代码）
头：
如何在不使用ng-cloak的情况下停止未编译的数据？
<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标签：
（该标签被包含在体标记内并包括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>
结束body标签：
<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：带有ang的javascript文件的部分ular代码。
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元素的花括号。