模块失败，每隔几次刷新浏览器一次。
模块失败，每隔几次刷新浏览器一次。
提问于 2017-01-09 03:26:46
我有一个问题，一个模块加载每6-7次，我的网页是加载。我有一个medication.php文件，其中我连接到一个medication.js javascript文件。这个javascript文件包含我正在加载一个模块和设置一个控制器。我已经在chrome和safari上尝试过这一点，当页面最初加载时，会抛出错误，并且每7-8次刷新一次页面。
您可以通过多次重新加载此页来测试这一点，您会发现内容不会随机显示，引发的错误是
当模块由于某些异常而无法加载时，会发生此错误。上面的错误消息应该提供额外的上下文。
模块无法加载的一个常见原因是您忘记将文件包含在定义的模块中，或者无法加载该文件。
medication.php：在这里，加载medication.js和角CDN。如你所见，我有我的ng-app，我也有我的ng-controller。
<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"/>
<title>Shop For Medication </title>
<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"/>
</head>
<body>
<ul class="nav nav-tabs">
<div class="container">
<div class="navbar-header" style="background-color:#2a6cd6">
<a class="navbar-brand" href="#">The Med Company</a>
</div>
<ul class="nav navbar-nav" style="background-color: #2a6cd6" role="navigation">
<li ><a href="homepage.php"> Home Page</a> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Purchase Something<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="vitamins.php">Vitamins</a></li>
<li><a href="medication.php">Medication</a></li>
</ul>
</li>
<li><a href="aboutus.php">About Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" style="background-color:#2a6cd6"role="navigation">
<li><a href="./checkout.php" id="check-out"><span class="glyphicon glyphicon-shopping-cart"></span>Check Out</a></li>
<li><a href="#" id="sign-out"><span class="glyphicon glyphicon-user"></span> Sign Out</a></li>
</ul>
</div>
</ul>
<div class="container" ng-controller="mycontroller1" ng-cloak>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:10%">Quantity</th>
<th style="width:10%">Subtotal</th>
<th style="width:20%"></th>
</tr>
</thead>
<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" ng-bind="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" ng-bind="3.99*subtotal.subtotal2" class="text-center" >
</td>
<td>
<input type="hidden" name="step" value="2"></input>
<button type="button" 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.min.js"></script>
<script type="text/javascript" src="js/bootstrap.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/medication.js"></script>
<script type="text/javascript" src="js/signout.js"></script>
</body>
</html>medication.js
window.onload=function(){
button1=document.getElementById("button1");
button2=document.getElementById("button2");
number1=document.getElementById("amount1");
number2=document.getElementById("amount2");
number1.value=0;
number2.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;
}
}
});
button1.onclick=function(){
vex.dialog.buttons.YES.text="Purchase"
vex.dialog.buttons.NO.text="Cancel"
vex.dialog.confirm({
message:"Are you sure you want to purchase this item?",
callback: function(value){
var data=$("#medication-product-1").serialize();
$.ajax({
type:'POST',
url:'./php/add-medicine-to-cart.php',
data:data,
success: function(response){
console.log(response);
}
});
}
});
}
button2.onclick=function(){
vex.dialog.buttons.YES.text="Purchase"
vex.dialog.buttons.NO.text="Cancel"
vex.dialog.confirm({
message:"Are you sure you want to purchase this item?",
callback: function(value){
var data=$("#medication-product-2").serialize();
$.ajax({
type:'POST',
url:'./php/add-medicine-to-cart.php',
data:data,
success: function(response){
console.log(response);
}
});
}
});
};
}回答 1
Stack Overflow用户
发布于 2017-01-09 04:19:41
事实证明，为了“避免未编译内容的闪光灯”，需要将angular.js文件放在头部。如果您不这样做，那么必须使用ng-cloak。尽管将angular.js文件放在头中并不常见，但除非在本例中完成，否则内容并不总是加载。请大家在我的回答中补充一下，为什么这个问题解决了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41540594
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号