Question

我正在使用ng-repeat通过WordPress REST-API打印页面的帖子列表。我在每个帖子上使用高级自定义字段。从我可以看到一切正常，但帖子数据没有显示在一个容器中，但它显示在另一个容器中。我还应该提一下，这个设置就像标签一样。（用户单击帖子的选项卡，并显示发布数据）

＆＃13;

   var homeApp = angular.module('homeCharacters', ['ngSanitize']);
   homeApp.controller('characters', function($scope, $http) {
     $scope.myData = {
       tab: 0
     }; //set default tab
     $http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
       $scope.myData.data = response.data;
     });
   });
   homeApp.filter('toTrusted', ['$sce',
     function($sce) {
       return function(text) {
         return $sce.trustAsHtml(text);
       };
     }
   ]);

＆＃13;

HTML:

<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
  <div class="char_copy">
    <h3>Meet the Characters</h3>
    <div ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
      <!--this is the section that will not display-->
      <h3>{{ item.acf.team }}</h3>
      <h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
      <p class="hero_type">{{ item.acf.hero_type }}</p>
      {{ item.acf.description }}
      <a href="{{ item.acf.character_page_link }}">Learn More</a>
    </div>
  </div>
  <div class="char_tabs">
    <!--if I put the identical {{}} in this section it WILL display-->
    <nav>
      <ul ng-init="myData.tab = 0" ng-model='clicked'>
        <li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}">
          <a href ng-click="myData.tab = item.menu_order">
            <img src="{{ item.featured_image.source }}" />
            <h3>{{ item.title }}</h3>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

＆＃13;

我还应该提到我使用Ng-inspector，它确实显示了数据被拉入。我可以通过控制台确认这一点。我检查过以确保没有css在播放; DOM中的div完全是空的。

我感谢GREAT角度社区所展示的所有帮助！

Answer 1

问题是您使用了ng-bind-html而不是ng-repeat元素正在更改ng-repeat div的内部内容。我猜你在ng-repeat指令中有内部转换模板，你不应该在某个地方使用ng-bind-html。

<强>标记

<div ng-repeat="item in myData.data" ng-show="myData.tab === item.menu_order">
  <!--this is the section that will not display-->
  <h3>{{ item.acf.team }}</h3>
  <h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
  <p class="hero_type">{{ item.acf.hero_type }}</p>
  {{ item.acf.description }}
  <a href="{{ item.acf.character_page_link }}">Learn More</a>
</div>

Angular http数据显示在一个div中但不显示在另一个div中

1 个答案: