javascript - AngularJS:如何排除多个指令？

(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为空，并且表单中没有显示该按钮。

我是在做错什么，还是这是个错误？

最佳答案

我已经设法解决了。我在transclude : 'element'指令上使用了replace : true和portlet，并且我给它的priority比其他指令高。我这样做的原因是感觉而不是对牙槽inner内部运作的深入了解。

关于第一部分
之所以使用transclude : 'element'是因为

使用Replace是因为从我所见，将transclude设置为element时，它总是被使用。
优先是我的直觉。

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

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

关于javascript - AngularJS:如何排除多个指令？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18496912/

Portlet

javascript - AngularJS:如何排除多个指令？