將用戶數據從PHP/HTML傳遞到AngularJS

Question

我是AngularJS的新手，我仍然在學習，但我沒有看到這個問題在本網站的任何地方都被問到。我正在構建一個傳統的html/php列表網站，將索引頁面中的列表ID（例如列表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> 

角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請求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

加載哪些我試過

我發現一對夫婦的職位上使用位置變量試圖將get變量拉出url，但每當我嘗試使用位置時，它都會使整個控制器崩潰。

我也嘗試使用PHP來設置HTML中的隱藏元素的值，並在angularJS控制器中使用jQuery將其拉出，但這導致了「未定義」變量。

任何幫助表示讚賞！謝謝！

Answer 1

你不應該在你的角前端使用<?php ... ?>或連結PHP網站或類似的東西，因爲一旦你決定使用角度，它意味着所有的前端是建立與棱角分明，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，你可以處理列表ID由$routeParams供應商

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 

      } 
     }); 
}); 

希望這個幫助，你可以發表評論的任何問題