javascript - How to use php (wordpress) functions in AngularJS partials files? - Stack Overflow

admin管理员组

文章数量:1401620

I am using angularjs to load a list of my wordpress posts, however I can not get any of my php functions to work with my partials file.

I've tried using something such as search.php instead of search.html but when doing so I get errors such as fatal error get_post_meta is undefined.

Now I know we are not suppose to mix client side with server side, and I can possibly use some kind of service to parse my php, but I have no idea how to go about it. I need my search.php to render my php tags so I can display custom fields, and use several php functions I have there.

Whats the best way of doing this?

On my page template (.php) I have --

<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>
            &copy; <?php echo date( 'Y' ); ?>
        </footer>
    </div>

And on my php file I want to be called into view has functions such as --

<?php 
$pp1b = get_post_meta(get_the_ID(), 'pa_meta_p1b', true); 
$pp1c = get_post_meta(get_the_ID(), 'pa_meta_p1c', true);
$pp1d = get_post_meta(get_the_ID(), 'pa_meta_p1d', true); ?>

Math --

if( is_numeric( $price1 ) ) {
    $a1 = $price1;
}
$b1 = $pp1d;
$sqft1 = str_replace( ',', '', $b1 );

if( is_numeric( $sqft1 ) ) {
    $b1 = $sqft1;
}

$a2 = $pp2f;
$price2 = str_replace( ',', '', $a2 );

if( is_numeric( $price2 ) ) {
    $a2 = $price2;
}
$b2 = $pp2d;
$sqft2 = str_replace( ',', '', $b2 );

if( is_numeric( $sqft2 ) ) {
    $b2 = $sqft2;
}

$a3 = $pp3f;
$price3 = str_replace( ',', '', $a3 );

if( is_numeric( $price3 ) ) {
    $a3 = $price3;
}
$b3 = $pp3d;
$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; ?>

And functions --

<?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'));} ?>

My app script --

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);

So how can I get this to work with ng-view and my partials templates?

UPDATE

I do use wordpress api and I am aware of {{tag}} ... I need specific things done with php though. Is there a way to preprocess it into the partial files?

I am using angularjs to load a list of my wordpress posts, however I can not get any of my php functions to work with my partials file.

I've tried using something such as search.php instead of search.html but when doing so I get errors such as fatal error get_post_meta is undefined.

Now I know we are not suppose to mix client side with server side, and I can possibly use some kind of service to parse my php, but I have no idea how to go about it. I need my search.php to render my php tags so I can display custom fields, and use several php functions I have there.

Whats the best way of doing this?

On my page template (.php) I have --

<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>
            &copy; <?php echo date( 'Y' ); ?>
        </footer>
    </div>

And on my php file I want to be called into view has functions such as --

<?php 
$pp1b = get_post_meta(get_the_ID(), 'pa_meta_p1b', true); 
$pp1c = get_post_meta(get_the_ID(), 'pa_meta_p1c', true);
$pp1d = get_post_meta(get_the_ID(), 'pa_meta_p1d', true); ?>

Math --

if( is_numeric( $price1 ) ) {
    $a1 = $price1;
}
$b1 = $pp1d;
$sqft1 = str_replace( ',', '', $b1 );

if( is_numeric( $sqft1 ) ) {
    $b1 = $sqft1;
}

$a2 = $pp2f;
$price2 = str_replace( ',', '', $a2 );

if( is_numeric( $price2 ) ) {
    $a2 = $price2;
}
$b2 = $pp2d;
$sqft2 = str_replace( ',', '', $b2 );

if( is_numeric( $sqft2 ) ) {
    $b2 = $sqft2;
}

$a3 = $pp3f;
$price3 = str_replace( ',', '', $a3 );

if( is_numeric( $price3 ) ) {
    $a3 = $price3;
}
$b3 = $pp3d;
$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; ?>

And functions --

<?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'));} ?>

My app script --

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);

So how can I get this to work with ng-view and my partials templates?

UPDATE

I do use wordpress api and I am aware of {{tag}} ... I need specific things done with php though. Is there a way to preprocess it into the partial files?

• javascript
• php
• angularjs
• json
• wordpress

Share Improve this question Follow edited Feb 12, 2016 at 6:43 730wavy asked Feb 9, 2016 at 6:56 730wavy730wavy 70411 gold badge2020 silver badges6565 bronze badges 4

• 6 This would be awfully unmaintainable. Consider using a WP RESTful plugin, and the $http service to retrieve your data. – moonwave99 Commented Feb 11, 2016 at 13:39
• 1 You shouldn't do this. Write your own API endpoint for the WP site (or use the plugin mentioned above), and use JavaScript to make requests to the API. – rnevius Commented Feb 11, 2016 at 15:39
• what do you mean? Currently I am using a plugin for the wp-api. Can either one of you provide me an answer with an example or such? @moonwave99 – 730wavy Commented Feb 12, 2016 at 6:41
• Be clear that angularJS is UI coding framework. PHP is a server side language. You just cannot call server side function from angularJS variable, cause its damn frontend. Only JS is readable, thats why its named angularJS not angularPHP. – Vineet 'DEVIN' Dev Commented Feb 17, 2016 at 19:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +25

If you want to include wordpress native functions in external php file (not default template file), you can load the wordpress default functions by loading wp-blog-header.php or wp-load.php into that file

like adding, require_once("/path/to/wordpress/wp-load.php"); at the very beginning.

You can refer the code below for $http request retrieving json data,

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;
        }*/
    }
}]);

Additionally, I don't see the point of using AngularJS directly into wordpress, there's already jQuery+Ajax you can use, there's no point loading additional library

You can use php files for all the query related things and call that php file with some sort of ajax functionality and bind the response data to some div in Angular .. please find the example below :

<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>

They have put all the php codes in api.php file and onsuccess binded the response data to $scope variable

Now when the button in the below will be pressed they will fetch the data from php file and put it in HTML file

<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>

You can use this code as reference

Yes, there is a way to pre-process php into partial files.

From the mand line:

cd /var/www/html
php calculate_prices.php > prices.tpl.html

That will dump the output of the PHP file into the prices.tpl.html file. .tpl.html is a naming convention standing for "html template".

Another way of getting the processed PHP output is navigating to that page in your google chrome and opening up Chrome Devtools. In the devtools panel go to the Elements page, find the div you are looking for, click it, and push CTRL + C. Then create the new file and paste it there.

---

Additionally, that all may be an unnecessary step: Try this

<div ng-include="'myfile.php'"></div

Note that it has both double quotes and single quotes. The single quotes prevent it from looking for $scope.myfile.php, and instead directly loads that file.

本文标签： javascriptHow to use php (wordpress) functions in AngularJS partials filesStack Overflow