Question

我定义了一个主视图，在该主视图中，我为我的博客帖子定义了一个抽象模板。该博客有两个与之相关的观点：＆＃34; list＆＃34;和＆＃34;侧边栏＆＃34;。有两种状态使用这种抽象，一种是＆＃34; list＆＃34;是博客帖子的列表（其内容被截断），以及＆＃34;列表＆＃34;是一篇博文。侧边栏只包含最近博客和热门标签的链接，仅存在于这两个提到的视图中。以下是我的路线定义方式：

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

})

然后在我的博客视图中我有：

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

除了在我的＆＃34;列表中，一切似乎都运行正常。查看，当我在＆＃34; blog.home＆＃34;之间切换时到＆＃34; blog.view＆＃34; （从查看列表到查看单个博客帖子），它会闪烁＆＃34; undefined＆＃34;。控制台中也会出现错误，因此它看起来像是尝试渲染该模板，但没有信息，然后刷新信息。

我读了一些关于决心的内容，但我不知道如何将信息传递给子视图，因为信息还不知道。我也尝试使用已建议的ng-cloak属性，但它没有工作，我被告知ui-router没有响应ng-cloak。

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

Answer 1

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

如果您想在调用控制器之前等待承诺，请使用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);
    }
  });

Answer 2

此时我离UIRouter有点远......

一直在我自己的网站上写的Angular女巫其他的东西将包含一个博客模块...虽然我只是在尝试将核心实现推进开源世界的最初阶段，也许你可以从中获得灵感...

这使用：https://github.com/dotJEM/angular-routing代替，在很多方面非常相似......

无论如何，这是博客模块的最初核心：

https://github.com/dotJEM/Blog/blob/master/src/client/modules/blog/scripts/blog.ts

基本的共识是你实际上可能不需要＆＃34;补充工具栏＆＃34;相反，我有一个＆＃39; root＆＃39;查看博客页面上何时填充＆＃39; blog.html＆＃39;然后只包含侧边栏并具有“内容”的模板。视图以推入条目列表或单个条目，具体取决于活动状态。

Angular ui-router嵌套视图未定义闪烁

2 个答案: