嵌套的AJAX调用帮助Angular JS

I have a couple files I'm working with that require AJAX Calls. I have dashboad.html that hosts the main interface. I then have a leads.php file that renders information from leadsData.php into a nice Bootstrap Table. leadsData.php returns a JSON file.

When I click "Prospective Student", the right stuff happens ... it renders leads.php in the main dashboard.html. The problem is that when leads.php is rendered in dashboard.html, it doesn't get the information from leadsData.php. After some thinking, this makes sense ... there isn't an AJAX Call that requires leads.php to fetch information from leadsData.php.

|dashboard.html| AJAX --> |leads.php| AJAX --> |leadsData.php|

So it seems as if the first AJAX happens, but the second one doesn't.

Here is my code below:

dashboard.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>

</head>


<div ng-app="myApp" ng-controller="myController">

  <div class="row">

    <div class="col-lg-2">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Dashboard</a>
        </li>
        <li class="nav-item" ng-click = "LoadProspectiveStudents()">
          <a class="nav-link active"  href="#">Prospective Students</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>


    <div class="col-lg-10" style="border: solid;">
      <div class="container">
        <h1>MAIN CONTAINER</h1>
        <p ng-bind-html = "myResponse"></p>
      </div>
    </div>
  </div>

  <body>


  </body>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="dashboardController.js"></script>

</html>

leads.php

       <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

      </head>
      <body>

        <div ng-app = "myApp" ng-controller = "myCtrl">

          <!-- <textarea name="name" ng-model = "test"></textarea> -->

          <h1>Hi Mustafa</h1>

          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" ng-model= "test">
          </div>

          <table class="table">
            <thead>
              <tr>
                <th ng-click = "sortBy('first_name')">First Name</th>
                <th ng-click = "sortBy('last_name')">Last Name</th>
                <th ng-click = "sortBy('communityCollege')">Community College</th>
                <th ng-click = "sortBy('accountCreation')">Account Creation</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat = "user in myData | filter : test">
                <td> {{user.first_name}} </td>
                <td> {{user.last_name}} </td>
                <td> {{user.communityCollege}} </td>
                <td> {{user.accountCreation}}</td>
                <td>
                  <button type="button" class="btn btn-primary">View More</button>
                </td>
              </tr>
            </tbody>
          </table>

        </div>
        <script src="./leadsController.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
      </body>
    </html>

dashboardController.js

var app = angular.module('myApp', ['ngSanitize']);

app.controller('myController', function($scope, $http, $timeout) {

  // $scope.myResponse = "Mustafa Hoda";

  // $timeout(LoadProspectiveStudents(), 3000);


  //Load Prospective Students
  $scope.LoadProspectiveStudents = function(){
    $http.get("leads.php")
    .then(function(response) {
      $scope.myResponse = response.data;
      // $scope.renderedResponse = $parse($scope.myResponse);
      // $scope.myResponse = "Mustafa Hoda";
    }, function(response){
      $scope.myResponse = "Uh oh! Something went wrong";
    });



  }
});
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐