Question

我正在尝试构建一个简单的教程应用商品列表，然后点击它将导致一个新的页面显示杂货商品的详细信息，如价格，剩余数量等。

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

我怀疑它可能是通过命名状态约定或angular.module定义出错。有人可以开导我吗？谢谢！

这是州提供商代码

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 / posts / {{postId}}。

Answer 2

不完全确定我了解您的应用结构，但这里有working example，应遵循您的设计

首先，因为 'tab' 状态是两个孩子的父母 tab.posts 和 tab.view ，我将两个目标放在 tabs.html ：

中

<div>
  <h3>Tabs</h3>
  <hr />
  <div ui-view="tab-posts"></div>
  <div ui-view="tab-view"></div>
</div>

注意：事实上，可能只有一个甚至是未命名的模板<div ui-view=""></div>，两个州都可以像views : { '' : {...那样定位

我们如何从列表视图中查看评论的方式是这样表达的：

  <a href="#/tab/{{ postId }}">comments</a>  
  <a ui-sref="tab.view({postId: postId})">comments</a>

草稿的其余部分基本没有变化，只是不要忘记引用根目录中的所有模块：

var app = angular.module('myApp', [
  'app.controllers.view',
  'ui.router'
]);

工作的掠夺者是here

Answer 3

而不是：

<a href="#/posts/{{ postId }}">comments</a>

我更喜欢在refs中使用状态名称，以便angular会为你解析url。如果你这样做会更简单：

<a ui-sref="tab.view({postId:postId})">comments</a>

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

3 个答案: