2017-01-09 1 views
0

내 웹 페이지가로드 될 때마다 모듈을로드하는 데 문제가 있습니다. medication.php 파일이 있고이 파일에 medication.js 자바 스크립트 파일에 연결하고 있습니다. 이 자바 스크립트 파일에는 모듈을로드하고 컨트롤러를 설정하고 있습니다. 나는 크롬과 사파리에서도 이것을 시도했다. 그리고 페이지가 처음로드 될 때 에러가 발생하고 페이지가 새로 고쳐지는 7-8 번마다 한 번 던져진다.
This page을 여러 번 다시로드하면 콘텐츠를 임의로 표시 할 수 있으며 콘텐츠가 임의로 표시되지 않으며 다음 오류가 발생합니다. :

이 오류는 일부 예외로 인해 모듈이로드되지 않을 때 발생합니다. 위의 오류 메시지는 추가 컨텍스트를 제공해야합니다.브라우저가 새로 고침 될 때마다 모듈이로드되지 않습니다.

모듈을로드하지 못하는 일반적인 이유는 정의 된 모듈에 파일을 포함하는 것을 잊었거나 파일을로드 할 수 없었기 때문입니다.

medication.php : 여기서 medication.js 및 Angular 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); 
     } 
    }); 
} 
}); 

}; 
} 

답변

0

하나는 "컴파일되지 않은 내용의 플래시를 방지"하기 위해 머리에 angular.js 파일을 배치 할 필요가 밝혀졌습니다. 당신이 이것을하지 않으면 ng-cloak을 사용해야합니다. angular.js 파일을 머리에 배치하는 경우는 드뭅니다 만,이 경우에는 컨텐츠가로드되지 않는 한 항상로드되지는 않습니다. 누구든지이 문제가 해결 된 이유에 대해 내 대답에 자유롭게 추가하십시오.

관련 문제