Wie verwende ich PHP-Funktionen (WordPress) in AngularJS-Teildateien?

Ich verwende anglejs, um eine Liste meiner WordPress-Posts zu laden, aber ich kann keine meiner PHP-Funktionen dazu bringen, mit meiner Partials-Datei zu arbeiten.

Ich habe versucht, etwas wie search.php anstelle von search.html zu verwenden, aber wenn ich das tue, erhalte ich Fehler wie fatal error get_post_meta is undefined.

Jetzt weiß ich, dass wir nicht die Client-Seite mit der Server-Seite mischen sollen, und ich kann möglicherweise eine Art Dienst verwenden, um meine PHP-Datei zu analysieren, aber ich habe keine Ahnung, wie ich vorgehen soll. Ich brauche meine search.php, um meine PHP-Tags zu rendern, damit ich benutzerdefinierte Felder anzeigen und mehrere PHP-Funktionen verwenden kann, die ich dort habe.

Was ist der beste Weg, dies zu tun?

Auf meiner Seitenvorlage (.php) habe ich —

<div id="page" ng-app="app">
        <header>
            <h1>
                <a href="https://stackoverflow.com/questions/35285732/<?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>

Und auf meiner PHP-Datei, die ich aufrufen möchte, gibt es Funktionen wie —

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

Mathematik —

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

Und Funktionen —

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

Mein App-Skript —

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

Wie kann ich das also mit ng-view und meinen Partials-Vorlagen zum Laufen bringen?

AKTUALISIEREN

Ich verwende die WordPress-API und bin mir bewusst, dass {{tag}} … Ich muss jedoch bestimmte Dinge mit PHP erledigen. Gibt es eine Möglichkeit, es in die Teildateien vorzuverarbeiten?

Wenn Sie native WordPress-Funktionen in eine externe PHP-Datei (nicht in die Standardvorlagendatei) einbinden möchten, können Sie die WordPress-Standardfunktionen durch Laden laden wp-blog-header.php oder wp-load.php in diese Datei

wie hinzufügen, require_once("/path/to/wordpress/wp-load.php"); ganz am Anfang.

Sie können den folgenden Code für die $http-Anforderung zum Abrufen von JSON-Daten verwenden.

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

Außerdem sehe ich keinen Sinn darin, AngularJS direkt in WordPress zu verwenden, es gibt bereits jQuery+Ajax, das Sie verwenden können, es macht keinen Sinn, zusätzliche Bibliotheken zu laden

Sie können PHP-Dateien für alle abfragebezogenen Dinge verwenden und diese PHP-Datei mit einer Art Ajax-Funktionalität aufrufen und die Antwortdaten an ein div in Angular binden. Bitte finden Sie das folgende Beispiel:

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

Sie haben alle PHP-Codes in die Datei api.php eingefügt und bei Erfolg die Antwortdaten an die Variable $scope gebunden

Wenn nun die Schaltfläche unten gedrückt wird, werden die Daten aus der PHP-Datei abgerufen und in die HTML-Datei eingefügt

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

Sie können diesen Code als Referenz verwenden

Ja, es gibt eine Möglichkeit, PHP in Teildateien vorzuverarbeiten.

Von der Befehlszeile:

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

Dadurch wird die Ausgabe der PHP-Datei in die Datei Prices.tpl.html ausgegeben. .tpl.html ist eine Namenskonvention, die für “HTML-Vorlage” steht.

Eine andere Möglichkeit, die verarbeitete PHP-Ausgabe zu erhalten, besteht darin, zu dieser Seite in Ihrem Google Chrome zu navigieren und Chrome Devtools zu öffnen. Gehen Sie im Devtools-Bedienfeld zur Seite „Elemente“, suchen Sie das gesuchte Div, klicken Sie darauf und drücken Sie STRG + C. Erstellen Sie dann die neue Datei und fügen Sie sie dort ein.

Außerdem kann das alles ein unnötiger Schritt sein: Probieren Sie dies aus

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

Beachten Sie, dass es sowohl doppelte als auch einfache Anführungszeichen enthält. Die einfachen Anführungszeichen verhindern, dass nach $scope.myfile.php gesucht wird, und lädt stattdessen diese Datei direkt.