如何让我的wordpress网站在同一页面中显示博客文章，而无需使用AngularJS加载新页面

How can I get my wordpress site to show a blog post in the same page without loading a new page using AngularJS?

本文关键字：文章 新页面 加载 AngularJS 显示 wordpress 我的 网站 一页      更新时间：2023-09-26

我一直在尝试一个下午的大部分时间来让它工作。当我使用静态页面时，我已经设法让它工作，但是每当我尝试让它重复加载帖子时，它都会在新页面中打开帖子。我希望它做的是在同一页面中打开该帖子而不加载页面。

有人可以指出我正确的方向吗？这是我当前的代码。

媒体.js

var mediaApp = angular.module('mediaApp', ['ngRoute']);
mediaApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/pages/posts.html',
            controller: 'mediaCtrl'
        })
        .when('/:slug', {
            templateUrl: '/pages/single-post.html',
            controller: 'Content'
        })
        .otherwise({
            redirectTo: '/'
        });
    })
mediaApp.controller('mediaCtrl', function($scope, $http, $routeParams) {
        $http.get('wp-json/wp/v2/mediacentre').success(function(res){
            $scope.mediacentre = res;
        });
})
mediaApp.controller('Content',
        ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
            $http.get('wp-json/wp/v2/mediacentre/?filter[name]=' + $routeParams.slug).success(function(res){
                $scope.mediacentr = res[0];
            });
        }
    ]
);

剪报.html

<ul>
    <li ng-repeat="mediacentr in mediacentre">
        <a href="{{mediacentr.slug}}">
            {{mediacentr.title}}
        </a>
    </li>
</ul>

单柱.html

<h1>{{post.title}}</h1>
{{post.content}}

档案媒体中心.php

<?php get_header(); ?>
<div class="media-main" ng-app="mediaApp" ng-controller="mediaCtrl">
    <div ng-view></div>
</div>
<script src="/js/media.js"></script>
</div>
<?php get_footer(); ?>

对此的任何帮助将不胜感激。

我设法找出了这个问题的解决方案。事实证明，我需要更改基本网址的地方非常简单。

<base href="/media-centre/"></base>
相关文章：