Angular ui-router nesting views flashes undefined

Question

I have a main view defined, and within that main view, I define an abstract template for my blog posts. The blog has two views associated with it: "list" and "sidebar". There are two states that use this abstraction, one where the "list" is the list of blog posts (with their content truncated), and one where the "list" is a single blog post. The sidebar just contains links to recent blogs and popular tags and only exists in these two mentioned views. Here is how my routes are defined:

$stateProvider.state('blog', {
    abstract: true,
    templateUrl: "partials/blog.html",
    controller: "BlogController"
}).state('blog.home', {
    url: "/blog",

    views: {
        list : {
            templateUrl: "partials/blog-list.html",
            controller: "BlogPostController"
        },
        sidebar: {
            templateUrl: "partials/blog-sidebar.html",
            controller: "BlogPostController"
        }
    },
    resolve: {

    }
}).state("blog.view", {
    url: "/blog/:blogSlug",

    views: {
        list : {
            templateUrl: "partials/blog-post.html",
            controller: "BlogPostController"
        },
        sidebar: {
            templateUrl: "partials/blog-sidebar.html",
            controller: "BlogPostController"
        }
    }

})

Then in my blog view I have:

<div ui-view="list"></div>
<div ui-view="sidebar"></div>

Everything seems to be working fine, except within my "list" view, when I switch between "blog.home" to "blog.view" (from viewing the list to viewing the single blog post), it flashes "undefined". There are also errors that show up in the console, so it looks like it tries to render that template, but there is no information, and then refreshes with the information.

I read a little bit about resolve, but I don't see how I can pass the information to the child view since the information is not known yet. I also tried to used the ng-cloak attribute which has been suggested, but it didn't work and I was told the ui-router doesn't respond to ng-cloak.

Am I approaching this problem incorrectly or is there a way around this?

Answer 1

http://plnkr.co/edit/uOo1CSKSPEpNNYP9Ht3b?p=preview

Use resolve if you would like to wait for a promise, before your controller is invoked.

  $stateProvider.state("post", {
    template: "<h1>{{ post.title }}</h1><div>{{ post.content }}</div>",
    url: "/post/:id",
    resolve: {
      blog: function($stateParams, $http, $timeout) {
        var postid = $stateParams.id;
        console.log("Fetching blog post: " + postid);
        var promise = $http.get('blog.json').then(function (response) {
          // simulate long delay using $timeout before returning the blog posts
          return $timeout(function() { return response.data[postid]; }, 2000);              
        });

        return promise;
      }
    },
    controller: function($scope, blog) {
      $scope.post = blog;
      console.log("Controller invoked.  Blog post: ", $scope.post);
    }
  });