0

我正在使用 Grav CMS，我正在尝试通过 Angular/Json 构建我的博客列表页面（我正在通过 Json 解析所有页面数据）我已经设法让所有数据显示在 NGInspector 中，但无论我尝试什么它不会写入页面。

另外，我真的很讨厌重复使用。方法，因为对于这种特定情况似乎不正确（尽管我稍后会需要它）

这是我的 HTML（实际上是一个 TWIG 模板，还有静态内容）：

{% embed 'partials/base.html.twig' %}

{% set collection = page.collection() %}

{% block content %}
<div class="blog_app_wrap" ng-app="blogCategories" ng-controller="blogFilters">
        <section class="blog_header">
            <div class="header_text_wrap">
                <div class="blog_title">
                    <h1>Latest Mortgage Insight</h1>
                    <div class="underline_center"></div>
                </div>
                <div class="header_text">
                    <h2 ng-repeat="items in blogHeader">{{items.header.title}}</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a class="small_button" href="javascript:void(0)">Read Full Article</a>
                </div>
            </div>
            <div class="overlay_lite"></div>
        </section>
        <div class="category_bar_contain">
            <!--ToDo: Add horizontal, scrollable category section here-->
            <div class="category_wrap">
                <ul>
                    <li class="active" id="cat_all">All Posts</li>
                    <li id="cat_name2">Topic 1</li>
                    <li id="cat_name3">Topic 2</li>
                    <li id="cat_name4">Topic 3</li>
                    <li id="cat_name5">Topic 4</li>
                    <li id="cat_name6">Topic 5</li>
                </ul>
            </div>
        </div>
        <div class="filter_contain">
            <input type="text" placeholder="Search Articles" />
        </div>
        <section class="blog_grid_contain">
            <!--ToDo: Add a 3X blog post card grid based on exsisting bourbon columns that is the containers for the categories above-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3></h3>
                    <p></p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
        </section>
        {% include 'partials/footer.html.twig' %}
</div>
{% endblock %}

{% 嵌入 %}

这是 JSON 文件：

{
header: {
title: "Insights",
slug: "insights",
content: {
items: "@self.children"
  }
},
content: "",
children: [
{
  header: {
  title: "item test",
  taxonomy: {
  category: [
  "blog"
],
tag: [
"test"
]
}
},
content: "This is a test"
}
]
}

这是js：

var blogJson = "http://localhost:8888/sean/insights?return-as=json";//cache json url
var blogCat = angular.module('blogCategories', []);//cache app
//master controller
blogCat.controller('blogFilters', function($scope, $http) {
    $http.get(blogJson).then(function(res) {
        //grab all children json data
        $scope.childData = res.data.children;
        $scope.blogHeader = res.data.children[0];
    });
});

我将不胜感激任何人可以提供的帮助！

4

0 回答 0