Angular에서 php(워드프레스) 함수를 사용하는 방법JS 부분 파일?

Angular에서 php(워드프레스) 함수를 사용하는 방법JS 부분 파일?

angularjs를 사용하여 워드프레스 투고 목록을 로드하고 있지만 php 함수가 partials 파일로 동작하지 않습니다.

search.html 대신 search.php 같은 것을 사용해 보았습니다만, 그렇게 하면 치명적인 에러 get_post_meta가 정의되어 있지 않은 등의 에러가 표시됩니다.

클라이언트 측과 서버 측을 혼합해서는 안 된다는 것을 알고 있습니다.또한 어떤 서비스를 사용하여 php를 해석할 수도 있지만 어떻게 해야 할지 모르겠습니다.커스텀 필드를 표시할 수 있도록 php 태그를 렌더링하려면 search.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>
            &copy; <?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 템플릿과 부분 템플릿에서 이 기능을 사용하려면 어떻게 해야 합니까?

갱신하다

워드프레스 API를 사용하고 있으며, {{tag}}을 알고 있습니다.하지만 php에 대한 구체적인 작업이 필요합니다.그것을 부분 파일로 전처리하는 방법이 있나요?

워드프레스 네이티브 함수를 (기본 템플릿 파일이 아닌) 외부 php 파일에 포함시키고 싶다면 워드프레스 기본 함수를 로드하여 로드하면 됩니다.wp-blog-header.php또는wp-load.php그 파일에

예를 들어 추가,require_once("/path/to/wordpress/wp-load.php");맨 처음에

json 데이터를 취득하는 $http 요청에 대해서는 아래 코드를 참조할 수 있습니다.

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

또한 Angular를 사용하는 이유는 알 수 없습니다.JS가 워드프레스에 직접 입력되고, 사용할 수 있는 jQuery+Ajax가 이미 있으며, 추가 라이브러리를 로드하는 지점이 없습니다.

모든 쿼리에 대해 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 파일에 넣었고, onsuccess는 응답 데이터를 $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>

이 코드를 참조로 사용할 수 있습니다.

네, php를 부분 파일로 전처리하는 방법이 있습니다.

명령줄에서 다음을 수행합니다.

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

그러면 PHP 파일의 출력이 prices.tpl.html 파일에 덤프됩니다. .tpl.html은 "html template"를 나타내는 명명 규칙입니다.

처리된 PHP 출력을 가져오는 또 다른 방법은 구글 크롬의 해당 페이지로 이동하여 Chrome Devtools를 여는 것입니다.devtools 패널에서 Elements 페이지로 이동하여 찾고 있는 div를 찾아 클릭한 다음 CTRL + C를 누릅니다.그런 다음 새 파일을 만들고 여기에 붙여넣습니다.

---

또한 이 모든 것이 불필요한 단계일 수 있습니다.이거 드셔보세요

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

큰따옴표와 작은따옴표가 모두 포함되어 있습니다.작은 따옴표로 $scope.myfile을 찾을 수 없습니다.php 대신 해당 파일을 직접 로드합니다.

언급URL : https://stackoverflow.com/questions/35285732/how-to-use-php-wordpress-functions-in-angularjs-partials-files