javascript - Angular 和 php/mysql 中的路由

Question

我有一个 AngularJS 代码，它应该以部分形式接收数据，然后在数据库 mysql 中返回一个包含相应结果的表，知道如何修复它

第一个部分形式:

    <form>
          <div class="row">
              <div class="input-field col s12">
                <input id="seacrh" autofocus type="text" class="validate" ng-model="searching.name" required>
                <label for="search">Search</label>
              </div>
          </div>
          <div class="row">
              <div class="col s12">
                <button class="waves-effect waves-yel btn btnSearch col s12" ng-click="searchingElement()"><i class="fa fa-search icoSrch"></i></button>
              </div>
          </div>
        </form>

第二个部分表:

    <tr ng-repeat="element in elements">
                <td>{{element.name}}</td>
                <td>5</td>
                <td><button class="waves-effect waves-light btn blue">Details</button></td>
              </tr>

php 代码是否有效，因为通过控制台进行探测，但这里是:

    <?php
      $data = json_decode(file_get_contents("php://input"));
      $name = $data->name;
      $conn = new mysqli("localhost", "user", "pass","DBName");
      $sql = "SELECT `elements`.name FROM `elements` WHERE `elements`.name='$name'";
      $result = $conn->query($sql);
      $array = array();

      while($row = $result->fetch_assoc()) {
       $array[] = array(
       'name' => $row['name']
      );}
      echo json_encode($array);
  ?>

这里的app.js是我正在使用的路由和 Controller :

    var app = angular.module('haku_app',['ngRoute'])

    app.config(function($routeProvider){
      $routeProvider
      .when('/',{
        templateUrl: "partials/home.html",
        controller: 'srchCtrl'
      })
      .when('/results',{
        templateUrl: "partials/results.html",
        controller: 'srchCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    });

    app.controller('srchCtrl',function($scope, $http){
      $scope.serchingElemento= function(){
        $http.post("php/search.php",{'name':$scope.searching.name}).success(function(data){
          $scope.tiendas= data;
          location.href += 'results';
        }).error(function(response){
          console.log(response);
        });
      }
    });

Answer 1

我认为有两件事正在发生。首先，由于您使用的是 ngRoute，因此应该使用 $location.path() 来更改 View 。因此，在您的情况下: $location.path() = '/results'; 而不是 location.href = 'results';。查看文档中的示例:https://docs.angularjs.org/api/ngRoute/service/ $路线。

在执行此操作之前，您需要将调用后的结果值保存到服务中。 Angular 中的服务是单例的，这意味着您可以在 View 之间保存数据，无论您是否使用相同的 Controller 。关于如何编写 Angular 服务的示例有很多，我不再重复。这是一个很好的例子:AngularJS - Passing data between pages 。

所以你的逻辑是:

1. 调用电话
2. 在回调中，将发布数据保存到您的服务
3. 使用 $location.path() 更改 View
4. 在新 View 中，将数据从服务获取到 Controller 中，并在 View 中呈现。

如果您确实想要执行多个 View 和嵌套 View ，请查看 ui-router: https://github.com/angular-ui/ui-router 。它比 ngRoute 更复杂。不过，我认为你不需要它。但如果您处理更复杂的应用程序，您可能会发现它很有帮助。

最后，我注意到您的 Controller 显示$route.tiendas = data，但您的 View 显示element in elements。确保您使用正确的变量名称。

希望这有帮助。