Question

我将外部HTML模板加载到应用程序上下文中的 JSP 页面中。 HTML正在加载页面加载，但我有一些角度控制器存在于该HTML，这些控制器不工作。 angular.min.js本身没有加载。

Html模板： -

＆＃13;

<html>

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <!--<script type="text/javascript" src=""+window.parent.x+"/js/angular.min.js"></script>-->
  <script type="text/javascript">
    var context = window.parent.x;
    var url = '' + context + '/dashboard.do?method=getdashboarddetails';
    getdashboarddata();
    var Obj1;

    function getdashboarddata() {
      var request;
      if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        request = new ActiveXObject('Microsoft.XMLHTTP');
      }
      try {
        request.onreadystatechange = getInfo;
        request.open("POST", url, false);
        request.send();
      } catch (e) {
        alert('Unable to connect to server');
      }

      function getInfo() {
        if (request.readyState === 4) {
          if (request.status === 200) {
            var val = eval("(" + request.responseText + ")");
            Obj1 = JSON.stringify(val);
          }
        }
      }
    }
  </script>
  <script>
    //Angular JS
    var helloAjaxApp = angular.module("myApp", []);
    helloAjaxApp.controller('mytime', function($scope, $interval) {
      $scope.theTime = new Date().toLocaleTimeString();
      $interval(function() {
        $scope.theTime = new Date().toLocaleTimeString();
      }, 1000);
    });
    helloAjaxApp.controller("myCtrl", ['$scope', function($scope) {
      // $scope.sendGet = function() {

      //      $http({
      //          url :url,
      //          method : "POST"
      //        }).then(function(response) {
      alert(Obj1 + ' Angular');
      $scope.dashboard = Obj1;
      //     });
      //    };
    }]);
  </script>
</head>

<body>

  <div align="center">
    <font size="10" COLOR="#254117"><b>Customer Information Authorization</b></font>
  </div>
  <div ng-app="myApp">
    <div ng-controller="mytime">
      <h3 align="right">{{theTime}}</h3>
    </div>
    <div align="left" ng-controller="myCtrl">
      <table style="border-radius: 25px; background: #dfffff; border-collapse: collapse; margin: 15px; width:45%; height:40%; font-size:20px;">
        <tr style="color:white;background-color:#81A594;">
          <td>Quick Status</td>
          <td align="right">
            <!--  <button  ng-click="sendGet()">
   <img src="images/refresh.jpg" alt="Refresh" height="22" width="22">
   </button> -->
          </td>
        </tr>
        <tr>
          <td style=" text-align: left; padding: 8px;">
            <table style="background-color: white; width:100%;">
              <th style=" background-color: #81A594;color: white;">Branch/Circle Details</th>
              <tr>
                <td>
                  Locations
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.locations}}
                </td>
              </tr>
              <tr>
                <td>
                  Registered BC/Agents
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.registeredbc}}
                </td>
              </tr>
              <tr>
                <td>
                  Active BC/Agents
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.activebc}}
                </td>
              </tr>

            </table>
          </td>

          <td style=" text-align: left; padding: 8px; ">
            <table style="background-color: white;width:100%;">
              <th style="  background-color: #81A594;color: white;">Today`s Analysis</th>
              <tr>
                <td>
                  <a href="reportsnew.do?method=reports&rname=Enrollments&date=crr">Enrollments</a>
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.enrollments}}
                </td>
              </tr>
              <tr>
                <td>
                  <a href="reportsnew.do?method=reports&rname=AccountOpened&date=crr">Accounts Opened</a>
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.accopened}}
                </td>
              </tr>
              <tr>
                <td>
                  <a href="reportsnew.do?method=reports&rname=VerificationPending&date=crr">Verification Pending(Total)</a>
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.verpending}}
                </td>
              </tr>
              <tr>
                <td>
                  <a href="reportsnew.do?method=reports&rname=RejectedEnrollments&date=crr">Rejected Enrollments</a>
                </td>
              </tr>
              <tr style="background-color: #f2f2f2;">
                <td>
                  {{dashboard.rejected}}
                </td>
              </tr>
            </table>
          </td>


        </tr>
      </table>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

当你说'angular.min.js＆＃39;时，我不确定你的意思。没有加载。我将您的代码复制到我的本地机器 - 注释掉了对getdashboarddata（）的ajax调用，因为我无法访问您的服务器 - 然后在Chrome中运行该页面：

查看Chrome的DevTools，在网络标签下，您是否看到了对ajax.googleapis.com服务器的调用？是否得到回复？
是否出现在Chromes DevTools控制台中的错误？

当我在本地运行您的页面时，我会收到您在Controller中定义的警告消息，告知我Angular正在加载并运行。警报信息本身表示未定义的Angular＆＃39;因为Obj1没有在控制器的范围内定义。

Angular.min.js加载失败

1 个答案: