5

我的 Wordpress 应用程序中的 AngularJS 函数有问题。我想要创建的是一个 SPA，以便网站（它不是博客，我只是使用 WP 作为 CMS）可以流畅地运行，并且无需在手机上重新加载。为了实现这个目标，我决定在 Wordpress 中包含 AngularJS（如果这不是最好的解决方案，请告诉我 :)）。在我制作了一些教程向我解释了 AJS 中“视图”的主题之后，我尝试自己在一个单独的 html 文档中完成它，并且效果很好。

所以我的问题被总结了，我的 SPA 分为 3 列。左边是一种静态的（只是基本信息），第二个总是通过 WP 获得最新的内容（也很好用），右边的列应该通过单击“最新内容”的链接之一来更改其内容. 到这里为止你明白我的想法吗？:) 所以，你可能猜到了——它真的不想工作。

<?php get_header();?> <!-- Header + AngularJS included -->



<div class="content"> <!-- open class="content"-->
<a href="/?page_id=6">

</a>
<div class="bg-texture"> <!--open class "bg-texture/ closed in "footer"-->
    <?php while(have_posts()):the_post();?>
    <div class="col">


    <?php if (in_category('infotext')):?>
     <div class="infotext"> 




    <?php elseif (in_category('apps')):?>                
       <div class="round-borders-panel">  

   <?php elseif (in_category('righttext')):?> <!-- hier kommen die single-pages rein-->
            <?php if(function_exists('get_twoclick_buttons')) {get_twoclick_buttons(get_the_ID());}?>
        <?php endif;?>    


            <h1>
                <a href="<?php the_permalink()?>"> <?php the_title();?> </a>
            </h1>

        <?php the_content(__(''));?>
       </div>
     </div>

                <?php endwhile;?>

<?php get_the_ID('');?>


        <script src="angular.min.js"></script>

        <div data-ng-view></div>
     <script>
    var cloud = angular.module("cloud", []);

    demoApp.config(function ($routeProvider) {
    $routeProvider
            .when('/?=p<?php get_the_ID();?>,
                    {
                            controller: 'SimpleController',
                            templateUrl: '<?php get_template_part('single','');?>'
                    })
            .when('/view2',
                    {
                            controller: 'SimpleController',
                            templateUrl: 'Partials/view2.html'
                    })
            .when('/view3',
                    {
                            controller: 'SimpleController',
                            templateUrl: 'Partials/view3.html'
                    })
            .otherwise({redirectTo: '/view1'});
    });


    </script>
<!-- Loop-->

</div> <!-- Close <class="bg-texture-->

-->

现在肯定行不通。如果您能帮我解决这个问题，我将不胜感激。顺便说一句，我大约在 5 周前开始编程 - 所以新手可能会犯一些非常愚蠢的错误！:)

问候，亚尼克 :)

4

1 回答 1

2

I think angular is quite an overkill here. You might consider just using jquery (which ships with WordPress). Make the links in your "newest content" fire jquery functions which insert the requested content using an ajax request into the right box.

WordPress has some nice AJAX functionality built in: http://codex.wordpress.org/AJAX This might be of highest interest for you: http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

basic idea is you register a function with to a hook with the wp_ajax_nopriv_ ('no privileges') hook and request it using something like this:

jQuery(document).ready(function($) {
    var data = {
        action: 'my_action',
        whatever: 'any value to access later in php'
    };
    jQuery.post(ajax_url, data, function(response) {
        alert('Got this from the server: ' + response);
    });
});

'my_action' should be equal to the stuff you prefixed with wp_ajax_nopriv_. ajax_url needs to point to admin_url('admin-ajax.php'). You can use wp_localize_script() to make it accessible in your js.

于 2013-09-02T08:29:16.323 回答