AngularJS下一个视图不起作用

Question

我们目前正在学习/使用AngularJS并且遇到了障碍，我们希望能够使用下一个和上一个按钮更改表单视图。因此，我们可以单独填写表单的每个部分/阶段。

我们目前第一个表单字段'packingtest'显示没有任何问题，但我们无法点击/查看下一组字段。

如果有人可以提供建议，请告诉我们哪里出错了。

谢谢。

我们的Plnkr代码

// WarrantyForm
.state('warrantyForm', {
  url: '^/warrantyForm/:jobID',
  controller: 'warrantyFormController',
  views: {
    '': {
      templateUrl: 'warranty/form.html',
    },
    'warrantyForm@warrantyForm': {
      templateUrl: 'warranty/forms/packingtest.html'
    }
  }

})
.state('warrantyForm.usagetest', {
  url: '^/warrantyForm/:jobID/usagetest',
  templateUrl: 'warranty/forms/usagetest.html'
})
.state('warrantyForm.visualtest', {
   url: '^/warrantyForm/:jobID/visualtest',
   templateUrl: 'warranty/forms/visualtest.html' 
});

Answer 1

在阅读UI-Routes之后，很清楚我们哪里出错了。这些是我们下面的更新片段。如果其他人有类似的问题我真的建议调查UI-Routes。

<强> JS

// Form
.state('home.warrantyform', {
  url: '^/warranty/forms/:jobID',
  templateUrl: 'user/warranty/forms/index.html'
})
// Form, Packing Test
.state('home.warrantyform.packingtest', {
  url: '^/warranty/forms/packingtest/:jobID',
  templateUrl: 'user/warranty/forms/packing-test.html'
})
// Form, Usage Test
.state('home.warrantyform.usagetest', {
  url: '^/warranty/forms/usagetest/:jobID',
  templateUrl: 'user/warranty/forms/usage-test.html'
});

<强> HTML

<a ui-sref="home.warrantyform.packingtest" class="btn button">Previous</a>
<a ui-sref="home.warrantyform.usagetest" class="btn button">Next</a>