Return ACF variable from wp-json (rest api & angular) WordPress

• REFUNDED

I'm using the WP Rest API and Angular for the first time and i've having a hard time figuring out how to pull accurately (or any) acf data.

(screen of json output for posts/4)
https://www.dropbox.com/s/zu91eueuxsllczo/post4.PNG?dl=0

https://www.dropbox.com/s/0lo0ljkjq58lq23/post4acfdata.PNG?dl=0

I show information from the basic "/wp-json/posts/" but no idea how to display acf dat from "wp-json/posts/4"

My app.js looks like this:

var app = angular.module('roots', ['ngRoute', 'ngSanitize']);

//Config the route
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);

$routeProvider
.when('/', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main',
})
// get acf home
.when('/', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'HomeACF'
})
//end acf home
.when('/demo', {
templateUrl: myLocalized.partials + 'demo.html',
controller: 'Main'
})
.when('/blog/:ID', {
templateUrl: myLocalized.partials + 'content.html',
controller: 'Content'
})
.otherwise({
redirectTo: '/'
});
}]);

//Main controller
app.controller('Main', ['$scope', '$http', function($scope, $http) {
$http.get('wp-json/posts/').success(function(res){
$scope.posts = res;
// document.querySelector('title').innerHTML = 'Home | AngularJS Demo Theme';
});
}]);


//ACF TEST
app.controller('HomeACF', ['$scope', '$http', function($http) {
this.acf = $http.get('wp-json/posts/4')
}]);

//Content controller
app.controller('Content', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
$http.get('wp-json/posts/' + $routeParams.ID).success(function(res){
$scope.post = res;
// document.querySelector('title').innerHTML = res.title + ' | AngularJS Demo Theme';
});
}]);

//searchForm Directive
app.directive('searchForm', function() {
return {
restrict: 'EA',
template: 'Search Keyword: <input type="text" name="s" ng-model="filter.s" ng-change="search()">',
controller: ['$scope', '$http', function ( $scope, $http ) {
$scope.filter = {
s: ''
};
$scope.search = function() {
$http.get('wp-json/posts/?filter[s]=' + $scope.filter.s).success(function(res){
$scope.posts = res;
});
};
}]
};
});


my front page looks like this

<input type="text" ng-model="name">

<p>Hello, {{name}}!</p>

<div ng-view></div>//grabs my hmlt in partials folder


My main.html looks like:

<search-form></search-form>

<ul> // I CAN SHOW THIS
<li ng-repeat="post in posts">
<a id="{{post.ID}}" href="{{post.link}}" ng-bind-html="post.title"></a>
<div ng-bind-html="post.content"></div>
</li>
</ul>
// no idea what im doing wrong here
<div ng-controller="HomeACF as home">
{{home.acf.image_stock.ID}}
</div>


Answers (2)

2015-02-20

Reigel Gallarde answers:

do you get something with these?

<div ng-controller="HomeACF as home">

{{post.acf.image_stock.ID}}

</div>

---

Rory Heaney comments:

Hey Reigel,

No that does't return anything

2015-02-20

Romel Apuya answers:

<div ng-controller="HomeACF as home">
{{get.acf.image_stock.ID}}
</div>

---

Rory Heaney comments:

Hey Romel,

That doesn't work.

---

Romel Apuya comments:

this one?

<div ng-controller="HomeACF as home">
{{HomeACF.acf.image_stock.ID}}
</div>

---

Rory Heaney comments:

does work either, it could be something with the app.js