将用户数据从 PHP/HTML 传递到 AngularJS

Question

我是 AngularJS 的新手，还在学习，但我没有在本网站的任何地方看到这个问题。我正在构建一个传统的 html/php 列表网站，它将诸如列表 id 之类的数据从索引页面传递到列表页面 (listr.npctimes.com)。

在初次使用 angularJS 之后，我意识到它的优势在于单页 Web 应用程序，因此我不再尝试将其与整个站点相匹配，而是想创建一个 Web 应用程序供用户修改列表中的选定列表页。不幸的是，我还没有弄清楚如何从 url 中的 GET 数据（例如listr.npctimes.com/list.php?id=1）中获取列表 ID 到 angularJS 控制器，以便控制器可以从特定列表中请求列表项。

PHP/HTML（使用 AngularJS）

<?php $list_id = $_GET['id']; ?>

<div data-ng-app="listApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#">{{ list.name }}</a>
    </li>
  </ul>
</div>

Angular JS 控制器

listApp.controller("listCtrl", function ($scope, $http) {
  $http.get("http://listr.npctimes.com/php/items.php?list_id=1").success(function (response) {
    $scope.lists = response;
  });
});

目前 list_id 在控制器 http get request 中硬编码在 angularJS 但我想将 PHP list_id 变量获取到 angularJS 控制器，以便我可以使用它从正确的列表中请求项目以设置 web 应用程序首先。

items.php 文件返回简单的 JSON，看起来像

[{"id":"1","list_id":"1","name":"Renew Truck Registratiion","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""},{"id":"2","list_id":"1","name":"Rental Showing on Thursday","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""}]

并且可以在http://listr.npctimes.com/php/items.php?list_id=1加载

我的尝试

我发现了几篇关于使用 location 变量尝试将 get 变量从 url 中提取出来的帖子，但是每当我尝试使用 location 时，它会使整个控制器崩溃。

我也尝试使用 php 在 HTML 中设置隐藏元素的值，并在 angularJS 控制器中使用 jQuery 将其拉出，但这导致了“未定义”变量。

感谢任何帮助！谢谢！

Answer 1

你不应该在你的 Angular 前端使用 <?php ... ?> 或链接到 PHP 站点或类似的东西，因为一旦你决定使用 Angular，这意味着你所有的前端都是用 Angular 构建的，@ 987654323@ 是服务器端语言。只需向服务器端发送请求，然后接收数据并显示...

要传递/获取参数，您可以在$routeProvider中进行配置。

在你的app.js：

angular.module('exampleApp', [
  'ngRoute'  
])
.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        action: 'home'
      })
      .when('/list/:itemId', {
        templateUrl: 'views/item.html',
        action: 'lists'
});
});

然后，将列表加载到主页后，您可以为每个项目设置href：

<div data-ng-app="exampleApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#/list/{{list.id}}">{{ list.name }}</a>
    </li>
  </ul>
</div>

现在在您的itemCtrl 中，您可以通过$routeParams 提供者处理列表ID

angular.module('exampleApp.controllers', [])
    .controller('itemCtrl', function ($scope, $sce, $route, $routeParams, $http){   
      $scope.$on("$routeChangeSuccess", function( $currentRoute, $previousRoute ){
          if( $routeParams.itemId ){
             // use http to get the item which has id = $routeParams.itemId

          }
       });
});

希望对您有所帮助，有任何问题可以在评论中发布