12

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

Math -- 

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

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?

Improve this question
4
  • 6
    This would be awfully unmaintainable. Consider using a WP RESTful plugin, and the $http service to retrieve your data. 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. 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 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. Commented Feb 17, 2016 at 19:03

3 Answers 3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I used something similar couple of times, but with one more line: define('WP_USE_THEMES', false); require_once( '../../wp-blog-header.php' ); This would be the first two lines of a new .php file that can be used to generate the JSON output you want.
when I try using @dev_masta suggestion, I get this error 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
When you use require_once you should set up the path to your own wp-blog-header.php which is in your root wordpress folder, where the wp-config.php file is
Try with: require_once( '/wp-blog-header.php' );
@dev_masta no matter how i write the URL path, I keep getting this error -- 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
|
0

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

Improve this answer

1 Comment

I couldn't get it to work, the button does not display anything.
0

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

From the command 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.

Improve this answer

4 Comments

When trying to include my php file - <div ng-include="'myfile.php'"></div> it still gives me the same kind of error -- Fatal error: Call to undefined function get_post_meta() in /..../partials/search.php on line 2
This fetches the contents of (aka a response from) myfile.php - so it would return the executed version of the php - and therefore would not give you access to functions like get_post_meta() (function undefined because not found)... For PHP to include other PHP files, you use php's include.. e.g. <?php include("../search.php"); echo get_post_meta(); ?> I'm pretty sure your error is in your PHP and not your angular
I have multiple calls to get_post_meta for each custom field, so how would I be able to call my custom fields using php within my partials file?
My default search results page works fine but I am using angular because I need to be able to filter the posts and update pagination.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.