javascript - 如何允许单击每个项目/帖子，然后在新屏幕中查看它？

Question

我正在尝试构建一个简单的杂货教程应用程序列表，然后单击它将进入一个新页面，其中显示杂货的详细信息，例如价格、剩余数量等。

目前，点击评论按钮不会执行任何操作。我看到 URL 发生了抽搐，但它又恢复到原来的帖子 URL。 到目前为止没有语法问题。

我怀疑这可能是由于状态的命名约定或 angular.module 定义出了问题。有人可以启发我吗？谢谢!

这是stateProvider代码

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'})

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'templates/tab-posts.html',
      controller: 'PostsCtrl'}}})

.state('tab.view', {       //suspect error is here but various combos didnt work
  url: '/posts/:postId', 
  views: {
    'tab-view':{
      templateUrl: 'templates/tab-showpost.html',
      controller: 'PostViewCtrl'}}})

这是 postview.js 文件

var app = angular.module('app.controllers.view', []) //error even if remove this line 
app.controller('PostViewCtrl', function ($scope, $stateParams, Post) {
    $scope.post = Post.find($stateParams.postId);
});

这是 tab-showpost.html

<a href="{{ post.url }}">{{ post.title }}</a>
<a href="#/posts">Back to Posts</a>

这是 tab-posts.html

   <form ng-submit="submitPost()">
        <input type = "text" ng-model="post.title"/>
        <input type = "text" ng-model="post.url"/>      
        <input type = "submit" value="Add Post"/>
    </form>     
    <div ng-repeat="(postId, post) in posts">             
      <a href="{{ post.url }}">{{ post.title }}</a>
      <a href="#/posts/{{ postId }}">comments</a>  
    </div>

Answer 1

我认为它无法解析您的网址，也许这与您命名路由的方式以及它们如何相互继承有关。他们的网址不应该是 #/tab/posts/{{ postId }} 吗？

否则你可以尝试看看它是否可以与 ^ 一起使用以使路线绝对而不是相对于父路线。

因此，要使网址正常工作，请尝试

.state('tab.view', {       //suspect error is here but various combos didnt work
  url: '^/posts/:postId', 
  views: {
    'tab-view':{
      templateUrl: 'templates/tab-showpost.html',
      controller: 'PostViewCtrl'}}})

否则，如果我是正确的，它将采用相对于其父级(在本例中为 tab)的路径，因此具有 url #/tab/posts/{{ postId }}。