javascript - AngularJS:如何嵌入多个指令？

Question

(1) 我有一个名为 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) 这就是问题所在。我想使用第三个指令，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

我已经设法解决了这个问题。我在 portlet 指令上使用了 transclude : 'element' 和 replace : true 并且我给了它 priority高于其他指令。我这样做的原因是感觉而不是对 anuglar 内部工作原理的深入了解。

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

'element' - transclude the whole element including any directives defined at lower priority.

使用 Replace 是因为据我所知，当 transclude 设置为 element 时总是使用它。优先级是我的直觉。

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

这可能不是您正在寻找的答案，但我需要深入研究 Angular Directive(指令)才能真正了解发生了什么。无论如何，这不是一个错误，它只是糟糕的文档。