Angularjs 条件向导答案

【问题标题】：Angularjs conditional WizardAngularjs 条件向导
【发布时间】：2014-09-02 16:50:08
【问题描述】：

我正在开发一个表单，并且有一个“向导按钮”，如果此向导按钮为真，则该表单显示为向导。

有没有一种简单的方法可以避免代码重复？

举个例子：

<wizard on-finish="saveit()" ng-if="data.form.config.wizardmode"> 
 <wz-step title="Starting" ng-if="$index==0 && data.form.config.wizardmode">
   <h1>This is the first step</h1>
   <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
   <input type="submit" wz-next value="Continue" />
 </wz-step>
 <wz-step title="Continuing">
   <h1>Continuing</h1>
   <p>You have continued here!</p>
   <input type="submit" wz-next value="Go on" />
 </wz-step>
 <wz-step title="More steps">
    <p>Even more steps!!</p>
    <input type="submit" wz-next value="Finish now" />
 </wz-step>
</wizard>

如果向导关闭，我是否需要重新编写整个表单？基本上隐藏/显示所有<wz-step>标签是否有一个好的逻辑（角度方式）？

谢谢，帕特里克

【问题讨论】：

你可以为每个表单做一个指令
但我还有两个表格？
你会有2个表格，但你只会写一次
好的，听起来很酷，你有这个指令的例子吗？也许是基本逻辑？
它是angular js的基础之一，google自定义指令angular js，如果没有找到答案，可以再发个问题

标签： angularjs angularjs-directive wizard

【解决方案1】：

请检查这是否是您要查找的内容。我做了一个plunkr。

Plunkr

基本上我编写了向导指令，它的子指令称为wizardStep。

<wizard showWizard="showWizard">
  <wizard-step  step-number=1>
    Step 1
  </wizard-step>
  <wizard-step step-number=2>
    Step 2
  </wizard-step>
  <wizard-step step-number=3>
    Step 3
  </wizard-step>
</wizard>

【讨论】：

如果我在wizard标签上使用ng-show，所有内容都被隐藏了，所以我必须重写表单，或者你是什么意思？