AngularJS:如何转换多个指令？

Question

(1)我有一个transcluding指令调用portlet它获取其内容并将其包装在一些样板代码中.例如:

<portlet>
  <div class="foobar">My content</div>
</portlet>

通过模板portlet,这是:

<div class="portlet">
  <div class="icon"></div>
  <div class="content" ng-transclude="">          
  </div>
</div>

并成为:

<div class="portlet">
  <div class="icon"></div>
  <div class="content">
      <div class="foobar">My content</div> <!--the original content
                                         passed to portlet-->
  </div>

(2)我还有两个指令,dyn-form和dyn-form-field.用这种方式描述:

<dyn-form>
   <dyn-form-field type="textbox" placeholder="..." label="Name" />
   <! ...and so on... -->
</dyn>

dyn-form的模板:

<form class="..." ng-transclude="">
</form>

每个dyn-field模板都会生成html,用于为其生成标签/字段.所以原始代码被翻译成这样的东西:

<form class="...">
  <label>Name: <input type="text" placeholder="..." /></label>
  <!- ....and so on... -->
 </form>

(3)这是问题所在.我想使用第3个指令,dyn-form-portlet用于生成样板代码,用于显示每个表单上方显示的一些按钮,然后显示一个portlet,并将其dyn-form置于portlet内部.这就是我试图这样做的方式:

<dyn-form-portlet>
   <dyn-form>
     <dyn-form-field />
   </dyn-form>
</dyn-form-portlet>

dyn-form-portlet的模板看起来像这样:

<div class="dyn-form-portlet">
  <button>Foo</button>
  <button>Bar</button>
  <portlet ng-transclude="">
  </portlet>
</div>      

理论上这应该是有效的,即<dyn-form>应该放在里面<portlet>,<dyn-form-field>里面<dyn-form>等等.但是当我运行它时,我只看到显示的按钮dyn-form-portlet和代码portlet,但是portlet是空的,表单没有显示在其中.

我做错了什么,或者这是一个错误？

Answer 1

我已经成功解决了这个问题.我transclude : 'element'和replace : trueon portlet指令一起使用,并且它priority比其他指令更高.我这样做的原因是感觉而不是对内部运动的深刻了解.

关于第一部分 transclude : 'element'被使用是因为

'element' - 转换整个元素,包括以较低优先级定义的任何指令.

使用替换因为从我所看到的,当transclude设置为element时总是使用它.优先是我的预感.

这是plnkr http://plnkr.co/edit/axQ90dHOLmLNeNQ4ZlNl?p=preview

这可能不是您正在寻找的答案,但我需要深入研究角度指令,以真正了解正在发生的事情.无论如何,这不是一个错误,它只是糟糕的文档.