如何在 AngularJS 部分文件中使用 php (wordpress) 函数?
Posted
技术标签:
【中文标题】如何在 AngularJS 部分文件中使用 php (wordpress) 函数?【英文标题】:How to use php (wordpress) functions in AngularJS partials files? 【发布时间】:2016-05-19 01:34:01 【问题描述】:我正在使用 angularjs 加载我的 wordpress 帖子列表,但是我无法让我的任何 php 函数与我的部分文件一起使用。
我尝试过使用诸如 search.php 之类的东西来代替 search.html,但是这样做时会出现诸如致命错误 get_post_meta 未定义之类的错误。
现在我知道我们不应该将客户端与服务器端混合在一起,我可能会使用某种服务来解析我的 php,但我不知道该怎么做。我需要我的 search.php 来呈现我的 php 标签,以便我可以显示自定义字段,并使用我在那里拥有的几个 php 函数。
最好的方法是什么?
在我的页面模板 (.php) 我有 --
<div id="page" ng-app="app">
<header>
<h1>
<a href="<?php echo home_url(); ?>">Search</a>
</h1>
</header>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div ng-Cloak ng-controller="MyController" class="my-controller">
<div ng-view></div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php rewind_posts(); ?>
<div ng-controller="OtherController" class="other-controller">
<div class="text-center">
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="/partials/dirPagination.tpl.html"></dir-pagination-controls>
</div>
</div>
<footer>
© <?php echo date( 'Y' ); ?>
</footer>
</div>
并且在我的 php 文件中,我希望被调用到视图中具有诸如 --
之类的功能<?php
$pcomp1b = get_post_meta(get_the_ID(), 'pa_meta_comp1b', true);
$pcomp1c = get_post_meta(get_the_ID(), 'pa_meta_comp1c', true);
$pcomp1d = get_post_meta(get_the_ID(), 'pa_meta_comp1d', true); ?>
数学 --
if( is_numeric( $price1 ) )
$a1 = $price1;
$b1 = $pcomp1d;
$sqft1 = str_replace( ',', '', $b1 );
if( is_numeric( $sqft1 ) )
$b1 = $sqft1;
$a2 = $pcomp2f;
$price2 = str_replace( ',', '', $a2 );
if( is_numeric( $price2 ) )
$a2 = $price2;
$b2 = $pcomp2d;
$sqft2 = str_replace( ',', '', $b2 );
if( is_numeric( $sqft2 ) )
$b2 = $sqft2;
$a3 = $pcomp3f;
$price3 = str_replace( ',', '', $a3 );
if( is_numeric( $price3 ) )
$a3 = $price3;
$b3 = $pcomp3d;
$sqft3 = str_replace( ',', '', $b3 );
if( is_numeric( $sqft3 ) )
$b3 = $sqft3;
$ppsqft1 = ROUND($price1 / $sqft1);
$ppsqft2 = ROUND($price2 / $sqft2);
$ppsqft3 = ROUND($price3 / $sqft3);
$ppsav = ROUND((($ppsqft1 + $ppsqft2 + $ppsqft3)/3));
$b4 = $property_area;
$parea = str_replace( ',', '', $b4 );
if( is_numeric( $parea ) )
$b4 = $parea;
$ehvp = $ppsav * $parea;
$homevalue = number_format($ehvp, 0, '.', ',');
echo '$' . $homevalue; ?>
和功能 --
<?php if (class_exists('MRP_Multi_Rating_API')) MRP_Multi_Rating_API::display_rating_result(array('rating_item_ids' => 2, 'show_count' => false, 'result_type' => 'value_rt', 'no_rating_results_text' => 'N/A')); ?>
我的应用脚本 --
var app = angular.module('app', ['ngRoute', 'ngSanitize', 'angularUtils.directives.dirPagination'])
function MyController($scope)
$scope.currentPage = 1;
$scope.pageSize = 2;
$scope.posts = [];
$scope.pageChangeHandler = function(num)
console.log('search page changed to ' + num);
;
function OtherController($scope)
$scope.pageChangeHandler = function(num)
console.log('going to page ' + num);
;
app.config(function(paginationTemplateProvider)
paginationTemplateProvider.setPath('/partials/dirPagination.tpl.html');
);
app.config(function($routeProvider, $locationProvider)
$locationProvider.html5Mode(true);
$routeProvider
.when('/search-results',
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main'
)
.when('/:ID',
templateUrl: myLocalized.partials + 'content.html',
controller: 'Content'
);
)
app.controller('Main', function($scope, $http, $routeParams)
$http.get('wp-json/posts?type=property').success(function(res)
$scope.posts = res;
);
)
app.controller('Content', function($scope, $http, $routeParams)
$http.get('wp-json/posts?type=property/?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(function(res)
$scope.post = res;
);
);
app.controller('MyController', MyController);
app.controller('OtherController', OtherController);
那么我怎样才能让它与 ng-view 和我的部分模板一起工作?
更新
我确实使用 wordpress api 并且我知道 tag ...我需要用 php 完成特定的事情。有没有办法将它预处理成部分文件?
【问题讨论】:
这将是非常不可维护的。考虑使用WP RESTful plugin 和$http
服务来检索您的数据。
你不应该这样做。为 WP 站点编写自己的 API 端点(或使用上面提到的插件),并使用 javascript 向 API 发出请求。
什么意思?目前我正在使用 wp-api 的插件。你们中的任何一个都可以给我一个例子或类似的答案吗? @moonwave99
明确 angularJS 是 UI 编码框架。 PHP 是一种服务器端语言。你只是不能从 angularJS 变量调用服务器端函数,导致它该死的前端。只有 JS 是可读的,这就是为什么它命名为 angularJS 而不是 angularPHP。
【参考方案1】:
如果您想在外部 php 文件(不是默认模板文件)中包含 wordpress 原生函数,您可以通过将 wp-blog-header.php
或 wp-load.php
加载到该文件中来加载 wordpress 默认函数
喜欢在开头添加require_once("/path/to/wordpress/wp-load.php");
。
$http请求获取json数据可以参考下面的代码,
var app = angular.module('recentPost', []);
app.controller('PostController', ['$scope', '$http', function($scope, $http)
$http.get('your_json_url')
.then(function(response)
console.log( response );
/*if ( response.data !== '-1' )
$scope.lists= JSON.parse(response.data.data_received);
else
$scope.lists= response;
*/
]);
另外,我没有看到直接在wordpress中使用AngularJS的意义,已经有可以使用的jQuery+Ajax,没有必要加载额外的库
【讨论】:
我用过几次类似的东西,但多了一行:define('WP_USE_THEMES', false); require_once( '../../wp-blog-header.php' );
这将是一个新的 .php 文件的前两行,可用于生成所需的 JSON 输出。
当我尝试使用@dev_masta 建议时,我收到此错误Warning: require_once(mysite.com/wp-blog-header.php): failed to open stream: No such file or directory in /home/mysite/public_html/wp-content/themes/mytheme/partials/mainsearch.php on line 1 Fatal error: require_once(): Failed opening required 'mysite.com/wp-blog-header.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/mysite/public_html/wp-content/themes/mytheme/partials/mainsearch.php on line 1
当您使用require_once
时,您应该设置您自己的wp-blog-header.php
的路径,该路径位于您的wordpress 根文件夹中,wp-config.php
文件所在的位置
试用:require_once( '/wp-blog-header.php' );
@dev_masta 无论我如何编写 URL 路径,我都会不断收到此错误 -- Warning: require(/public_html/wp-blog-header.php): failed to open stream: No such file or directory in /home/site/public_html/wp-content/themes/child/partials/search.php on line 4
Fatal error: require(): Failed opening required '/public_html/wp-blog-header.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/site/public_html/wp-content/themes/child/partials/search.php on line 4
【参考方案2】:
您可以将 php 文件用于所有与查询相关的事情,并使用某种 ajax 功能调用该 php 文件并将响应数据绑定到 Angular 中的某个 div .. 请找到下面的示例:
<script type="text/javascript">
var sampleApp = angular.module('sampleApp', []); // Define new module for our application
// Create new controller, that accepts two services $scope and $http
function SampleCtrl($scope, $http)
$scope.date = "sample date"; // Bind data to $scope
// Define new function in scope
$scope.fetch = function()
// Use $http service to fetch data from the PHP web service
$http.get('api.php').success(function(data)
$scope.date = data.date; // Bind the data returned from web service to $scope
);
;
SampleCtrl.$inject = ['$scope', '$http']; // Ask Angular.js to inject the requested services
sampleApp.controller('SampleCtrl', SampleCtrl); // Initialize controller in pre-defined module
</script>
他们已经将所有的php代码放在api.php文件中,并且成功将响应数据绑定到$scope变量
现在当按下下面的按钮时,他们将从 php 文件中获取数据并将其放入 HTML 文件中
<body ng-controller="SampleCtrl">
<div>
<!-- When button is clicked the controller will use the fetch() in $scope
<button ng:click="fetch()">Load date</button>
<hr>
<!-- date is bound to $scope.date and automatically updates when changed ($scope.fetch()) call -->
<h1>Date is date!</h1>
</div>
</body>
您可以将此代码作为参考
【讨论】:
我无法让它工作,按钮不显示任何内容。【参考方案3】:是的,有一种方法可以将 php 预处理为部分文件。
从命令行:
cd /var/www/html
php calculate_prices.php > prices.tpl.html
这会将 PHP 文件的输出转储到 price.tpl.html 文件中。 .tpl.html 是代表“html 模板”的命名约定。
获取处理后的 PHP 输出的另一种方法是在您的 google chrome 中导航到该页面并打开 Chrome Devtools。在 devtools 面板中,转到 Elements 页面,找到您要查找的 div,单击它,然后按 CTRL + C。然后创建新文件并将其粘贴到那里。
此外,这一切都可能是不必要的步骤:试试这个
<div ng-include="'myfile.php'"></div
注意它有双引号和单引号。单引号阻止它查找 $scope.myfile.php,而是直接加载该文件。
【讨论】:
当试图包含我的 php 文件 -<div ng-include="'myfile.php'"></div>
它仍然给我同样的错误 - Fatal error: Call to undefined function get_post_meta() in /..../partials/search.php on line 2
这会获取myfile.php
的内容(也就是来自的响应) - 所以它会返回 php 的执行版本 - 因此不会让您访问像 get_post_meta()
这样的函数(函数未定义因为未找到)...对于 PHP 以包含其他 PHP 文件,您使用 php's include.. 例如<?php include("../search.php"); echo get_post_meta(); ?>
我很确定你的错误是在你的 PHP 中,而不是你的角度
我为每个自定义字段多次调用 get_post_meta,那么如何在部分文件中使用 php 调用我的自定义字段?
我的默认搜索结果页面工作正常,但我使用的是 angular,因为我需要能够过滤帖子并更新分页。以上是关于如何在 AngularJS 部分文件中使用 php (wordpress) 函数?的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS绑定,多个控制器通过一个服务,部分页面由php渲染