douzi4766 2018-05-01 03:25
浏览 113

嵌套的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";
    });



  }
});
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 数学的三元一次方程求解
    • ¥20 iqoo11 如何下载安装工程模式
    • ¥15 本题的答案是不是有问题
    • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
    • ¥15 C++使用Gunplot
    • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
    • ¥15 matlab数字图像处理频率域滤波
    • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
    • ¥15 ELGamal和paillier计算效率谁快?
    • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题