CODEWITHSUNDEEP
javascriptangularjs
flvll
flvll

Reputation: 87

AngularJS attach JSON to Controller in ng-view

Any NG experts out there?

I can't get my factory (VIEWservices) to add the JSON to the new view casestudy.php.

What I'm trying to achieve is when you click on a post with the function (openCase) it displays casestudy.php in the ng-view (which works) but I can't get it to display the relevant content to that post.

I think this is a really simple fix just been looking at it for hours and have had no joy.

HTML

<div ng-controller="homeCtrl">           
    <div ng-repeat="post in posts">
        <h1 ng-bind="post.title"></h1>

        <a ng-click="openCase(post.slug)">view more</a>

        <p ng-bind="post.id"></p>
    </div>

<!-- page content -->
    <div ng-view></div>


</div>

JS

var app = angular.module('appname', ['ngSanitize'])


app.config(function ($routeProvider, $locationProvider){
    $locationProvider.hashPrefix("!")
    $routeProvider
    .when('/:slug',
    {
        templateUrl: 'wp-content/themes/name/views/casestudy.php',
        controller: 'caseCtrl'
    })
    .otherwise('/')
});


app.controller('homeCtrl', function($scope, VIEWservices, $route, $location) {
   $scope.posts = VIEWservices.getPosts();

   console.log($scope.posts);

   $scope.openCase = function(caseSLUG) {
        // open a post by its slug
       console.log(caseSLUG);
       $location.path("/" + caseSLUG)
    }
});


app.controller('caseCtrl', function($scope, VIEWservices, $routeParams) {
    $scope.post = VIEWservices.getPosts()[$routeParams.slug];
    console.log($scope.post);
});


app.factory('VIEWservices', function($http) {
   return {
     getPosts: function() {
       return $http.get('wp-content/themes/name/ajax/homepage-casestudies.php').then(function (result) {
         return result.data;
       })
     }
   }
});

Upvotes: 0

Views: 670

Answers (3)

alexandru
alexandru

Reputation: 103

Since your question is not complete, I would ask myself the following:

  • What does console.log($scope.post) in caseCtrl write to the console?
  • What is the value of $routeParams.slug in caseCtrl?

On the other hand, why are you always getting all the post when you only need one? You could try adding another method in your factory to only get one post, like this:

getPost: function(postSlug) {
   return $http.get('wp-content/themes/name/ajax/homepage-casestudies.php?slug=' + postSlug).then(function (result) {
       return result.data;
   })
}

You would the of course need to add the login in your php file to get only one case.

Upvotes: 0

rg88
rg88

Reputation: 20977

I'm not certain this is what you are looking for but it may help you figure things out. To consume JSON try this:

Inject $http into your controller then GET the json, like so:

$http.get('data/' + $scope.filename + '.json').success(function (data) {
    $scope.retrievedJson = data;
});

That will populate the retrievedJson variable with the contents of the retrieved json file, making it available to the scope.

Upvotes: 0

IanW
IanW

Reputation: 773

Your factory's getPosts function is asynchronous. You'll need to use .then to get its return value. In your controller, try changing your code to this:

app.controller('caseCtrl', function($scope, VIEWservices, $routeParams) {
    var posts = VIEWservices.getPosts();
    posts.then(function(data)
    {
        $scope.post = data[$routeParams.slug];
    });
});

Upvotes: 1

Related Questions