将php变量传递给角度
Posted
技术标签:
【中文标题】将php变量传递给角度【英文标题】：Passing a php variable to angular 【发布时间】：2015-01-11 03:07:22 【问题描述】：我正在构建一个 web 应用程序，并且我是第一次使用 angular。我昨天尝试从 API 获取数据，但由于跨源资源限制，它在 Angular 中不起作用。幸运的是，我可以通过 php 中的简单 CURL 请求获取 json 日期。
所以我现在在这里。我在 PHP 变量中有 JSON 数据，并希望在我的 Angular 应用程序中使用这些数据。我怎样才能做到这一点？有没有办法将数据直接传递给角度？或者我应该用 php 创建一个 json 文件，然后将其加载到我的函数中？你有什么建议？
我想用 php 变量 $content 的内容填充 $scope.posts。
这是php代码：
<?php
/* gets the data from a URL */
function get_data($url)
$ch = curl_init();
$timeout = 5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
$returned_content = get_data('http://fingerzeig.ch/api/agenda/list');
$content = json_decode($returned_content);
//print_r ($content);
//Get first title
//$firstitle = $content[0] -> ID;
//print_r($firstitle);
?>
Angular 代码：
//MYAPP
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http)
$http.get(' WHAT SHOULD GO HERE? ').
success(function(data, status, headers, config)
console.log("success!");
console.log(data);
$scope.posts = data;
).
error(function(data, status, headers, config)
// log error
);
);
【问题讨论】：
您是否可以控制 API 以允许访问您的 Angular 应用程序？ @SteveAdams 不，不幸的是我没有控制权。所以我的网站上的数据已经在这个 php 变量中了。我可以回应它和一切。但是如何在我的 Angular 应用程序中使用它？ 【参考方案1】：感谢大家的帮助。它正在工作，解决方案非常简单。
我在 javascript 中创建了一个变量来获取 PHP 的返回内容。
var thedata = <?php echo $returned_content;?>;
然后我把这个变量放在我的 Angular 应用文件中：
//MYAPP
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope)
$scope.posts = thedata;
console.log(thedata);
);
我现在可以在我的 ng-repeat 中访问这些数据。
<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<ul ng-repeat="post in posts">
<li>post.ID</li>
</ul>
</div>
</body>
效果很好！非常简单的解决方案。
【讨论】：
【参考方案2】：您可以使用 apache 和 php 提供端点来从您自己的服务器获取此数据：
$http.get('/endpoint', function () ... );
您也可以做一些有时被称为“引导”数据到 DOM 的事情。这很好用——我通常这样做是为了确保单页应用程序的第一页加载不需要等待初始数据。第一个页面加载的所有内容都在服务器上设置并呈现到页面中以供应用收集，而无需发出进一步的请求：
为此，您可以像这样在窗口或全局范围内创建一个集合：
window.myPostData = "<?php echo $data; >";
随后在您的应用程序中，您通常可以期望窗口对象（或任何全局变量）在浏览器中始终可用，因此可以像这样访问它：
app.controller("PostsCtrl", function($scope)
var posts = window.myPostData;
);
但是，您可能也希望能够访问新数据，因此您可能会尝试这样的事情：
// If $data is empty, set myPostData to false.
window.myPostData = <?php echo empty($data) ? 'false' : $data; >;
...
app.controller("PostsCtrl", function($scope, $http)
var posts = window.myPostData;
// Set myPostData to false so future use of this controller during this
// request will fetch fresh posts.
window.myPostData = false;
// Now if we didn't bootstrap any posts, or we've already used them, get them
// fresh from the server.
if (!posts)
$http.get('/endpoint', function()
...
);
);
请注意，如果您不了解如何使用 apache 和 php 设置端点，您将只想坚持仅将数据引导到窗口或全局变量。这并不理想，但它会起作用。
【讨论】：
不客气 - 如果有任何不清楚的地方，请随时寻求更多帮助。 其实这里的问题是全局变量不是一个好主意，我想把它赋值为私有变量，你知道吗？ 从技术上讲，如果您将数据引导到 DOM 中，您可以将数据分配给您确定会出现的任何对象。我在该示例中选择了 window ，因为在浏览器中它是普遍可用的。但是假设你总是有一个app 对象，你可以将你的数据分配为app.bootstrap.myData = "<?php echo $myData; ?>" 或其他东西。这有意义吗？【参考方案3】：
由于您已经获取 JSON 数据，因此只需输出 JSON 数据。不需要做json_decode。
所以echo $returned_content
编辑：
Angular 代码中$http.get(' WHAT SHOULD GO HERE? ') 的部分应该指向 PHP 页面的相对 URL。例如如果您的 PHP 页面是在 http://server.com/webapp/get_data.php 访问的，那么您的角度将是 $http.get('/webapp/get_data.php')
【讨论】：
我知道这一点。我可以在我的网站上用 php 处理这些数据。但是我怎样才能让这些数据在我的 Angular 应用程序中使用呢？【参考方案4】：你可以像这样强制它进入范围，不确定这是否是最佳实践，但你... 或者你可以让你的角度控制器调用
中的 php 函数$http.get('func').then(function(data)
//do stuff
);
或者只是把它推到范围内
<input ng-model="myContent" value="<?php echo $returned_content?>"/>
【讨论】：
以上是关于将php变量传递给角度的主要内容，如果未能解决你的问题，请参考以下文章
通过 ajax 将 Javascript 变量传递给 PHP