javascript - Angular ui-router嵌套 View 闪烁未定义

Question

我定义了一个主视图，在该主视图中，我为我的博文定义了一个抽象模板。该博客有两个与之关联的 View :“列表”和“侧边栏”。有两种使用此抽象的状态，一种是“列表”是博客文章列表(内容被 chop )，另一种是“列表”是单个博客文章。侧边栏只包含指向最近博客和流行标签的链接，并且只存在于这两个提到的 View 中。以下是我的路线定义方式:

$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"
        }
    }

})

然后在我的博客 View 中我有:

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

一切似乎都工作正常，除了在我的“列表” View 中，当我在“blog.home”和“blog.view”之间切换时(从查看列表到查看单个博客文章)，它闪烁“未定义”。控制台中也会出现错误，因此看起来它试图呈现该模板，但没有信息，然后用信息刷新。

我阅读了一些有关 resolve 的内容，但我不知道如何将信息传递给 subview ，因为信息尚不清楚。我还尝试使用建议的 ng-cloak 属性，但它没有用，我被告知 ui-router 不响应 ng-cloak。

我是不是错误地处理了这个问题，还是有办法解决这个问题？

Answer 1

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

如果您想在调用 Controller 之前等待 promise ，请使用 resolve。

  $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);
    }
  });