Question

我在视图中的不同位置加载了2个控制器。一个工作完美，但另一个ng-repeats没有出现。它们也没有通过ng-inspector显示出来。我已经验证了http数据显示在检查器中。

我正在为两个控制器使用WordPress REST-API。

这是主要代码：

var homeApp = angular.module('homeCharacters', ['ngSanitize']);

homeApp.controller('mainMenu', function($scope, $http) {
  $http.get("http://localhost:3000/wp-json/menus/2").then(function(response) {
    $scope.menuData.data = response.data;
  });
});

homeApp.controller('characters', function($scope, $http) {
  $scope.myData = {
    tab: 0
  }; //set default tab
  $http.get("http://localhost:3000/wp-json/posts?type=character").then(function(response) {
    $scope.myData.data = response.data;
  });
});
homeApp.filter('stripTags', function() {
  return function(text) {
    return text ? String(text).replace(/<[^>]+>/gm, '') : '';
  };
});

mainMenu Controller (not working):

<nav ng-controller="mainMenu as menuData">
  <ul>
    <li ng-repeat="x in menuData.data"><a href="javascript:void(0)">{{ x.items.title }}</a>
    </li>
  </ul>
</nav>
<!--end header nav-->


characters controller (working):

<section class="characters" ng-controller="characters as myData">
  <div class="char_copy">
    <h3>Meet the Characters</h3>
    <div class="char_inject" ng-repeat="item in myData.data" ng-show="myData.tab === item.menu_order">
      <div class="copy_wrap">
        <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>
        <div class="description" ng-repeat="field in item.acf.character_description">
          <p>{{field.description_paragraph}}</p>
        </div>
        <a class="learn_more" href="{{ item.acf.character_page_link }}">Learn More <img src="./app/themes/big-blue/dist/images/big-white-arrow.png" /></a>
      </div>
      <div class="image_wrap">
        <img src="{{ item.acf.homepage_full_image.url }}" />
      </div>
    </div>
  </div>
  <div class="char_tabs">
    <nav>
      <ul ng-init="ch.tab = 0">
        <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 }}" />
            <div class="tab_title_wrap">
              <div class="h3_background">
                <h3>{{ item.acf.characters_name }}</h3>
              </div>
              <p>{{ item.acf.team }}</p>
            </div>
          </a>
        </li>
      </ul>
    </nav>
    <a class="more_characters" href="#">More Characters <img src="./app/themes/big-blue/dist/images/big-white-arrow.png" /></a>
  </div>
</section>

此处如果需要，控制器的json不起作用：

{
  ID: 2,
  name: "main",
  slug: "main",
  description: "",
  count: 6,
  items: [{
    ID: 43,
    order: 1,
    parent: 0,
    title: "The Resistants",
    url: "http://bigbluecomics.dev/the-resistants/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
    object_id: 41,
    object: "page",
    object_slug: "the-resistants",
    type: "post_type",
    type_label: "Page"
  }, {
    ID: 46,
    order: 2,
    parent: 0,
    title: "Hyper-Action",
    url: "http://bigbluecomics.dev/hyper-action/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
    object_id: 44,
    object: "page",
    object_slug: "hyper-action",
    type: "post_type",
    type_label: "Page"
  }, {
    ID: 38,
    order: 3,
    parent: 0,
    title: "Comics",
    url: "http://bigbluecomics.dev/comics/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
    object_id: 31,
    object: "page",
    object_slug: "comics",
    type: "post_type",
    type_label: "Page"
  }, {
    ID: 40,
    order: 4,
    parent: 0,
    title: "News",
    url: "http://bigbluecomics.dev/news/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
    object_id: 33,
    object: "page",
    object_slug: "news",
    type: "post_type",
    type_label: "Page"
  }, {
    ID: 36,
    order: 5,
    parent: 0,
    title: "About",
    url: "http://bigbluecomics.dev/about/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
    object_id: 27,
    object: "page",
    object_slug: "about",
    type: "post_type",
    type_label: "Page"
  }, {
    ID: 49,
    order: 6,
    parent: 0,
    title: "Contact",
    url: "http://bigbluecomics.dev/contact/",
    attr: "",
    target: "",
    classes: "",
    xfn: "",
    description: "",
    object_id: 47,
    object: "page",
    object_slug: "contact",
    type: "post_type",
    type_label: "Page"
  }],
  meta: {
    links: {
      collection: "http://bigbluecomics.dev/wp-json/menus/",
      self: "http://bigbluecomics.dev/wp-json/menus/2"
    }
  }
}

非常感谢所有的帮助，因为我还在学习角度！

Answer 1

您持有转发器的li上的绑定不正确。

另外，一点提示：尝试通过将该逻辑放在控制器中而远离使用ng-init。

<nav ng-controller="mainMenu as menuData"> <ul> <li ng-repeat="x in myMenu.data"><a href="javascript:void(0)">{{ x.items.title }}</a> </li> </ul> </nav>

应该是：

<nav ng-controller="mainMenu as menuData"> <ul> <li ng-repeat="x in menuData.data"><a href="javascript:void(0)">{{ x.items.title }}</a> </li> </ul> </nav>

Answer 2

我相信由于来自@Pytth

的提示，我将其整理出来

＆＃13;

homeApp.controller('mainMenu', function($scope, $http) {
  $http.get("http://localhost:3000/wp-json/menus/2").then(function(response) {
    $scope.menuData.data = response.data.items;
  });
});

＆＃13;

<nav ng-controller="mainMenu as menuData">
  <ul>
    <li ng-repeat="x in menuData.data"><a href="javascript:void(0)">{{ x.title }}</a>
    </li>
  </ul>
</nav>
<!--end header nav-->

＆＃13;

非常感谢！总是很高兴有另一双眼睛！

Ng-repeats显示在一个控制器中但不显示在另一个控制器中

2 个答案: