I have 2 controllers loading in different locations within my view. One controller works perfectly, but the other one does not show ng-repeats or appear in ng-inspector. I have confirmed that the http data is visible in the inspector.
Both controllers are using the WordPress REST-API.
Below is the main code:
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>If needed, here is the JSON for the non-working controller:
{
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: "",
...
}Thank you for all the assistance, as I am still learning Angular!