Question

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

在使用angularJS进行一些初步播放后，我意识到它的强度在于单页Web应用程序，因此我不再尝试将其与整个站点相匹配，并希望为用户创建一个Web应用程序来修改列表中的选定列表页。不幸的是，我还没有弄清楚如何从URL（例如listr.npctimes.com/list.php?id=1）中的GET数据获取list_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是在angularJS中的控制器http get请求中进行硬编码的，但是我希望将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

您不应该使用<?php ... ?>或链接到PHP网站或Angular前端中的类似内容，因为一旦您决定使用Angular，其意味着您的所有前端都已构建使用Angular，PHP是服务器端语言。只需向服务器端发送请求，然后接收数据并显示......

要传递传递/获取参数，您可以在$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

          }
       });
});

希望这个帮助，您可以发布任何问题作为评论

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

1 个答案: