javascript - 我们可以在 AngularJS 应用程序中动态使用指令吗

Question

我试图在 ionic 框架中调用(或使用)一些自定义指令，动态就像 <mydir-{{type}}哪里{{type}}将来自服务和范围变量，具有值 radio, checkbox, select等等，并将我的指令创建为 mydirRadio, MydirCheckbox, mydirSelect ，但它不起作用。
他们有什么好的方法可以按照{{type}}获取动态html吗？在范围内？

Answer 1

长话短说；不，你不能以这种方式动态加载指令。

您可以选择执行以下操作。正如其他答案所提到的，您可以将上下文作为属性传递(mydir type =“checkbox”)。您可以创建一个动态加载另一个指令的指令，正如其他人也提到的那样。在我看来，这两种选择都不是很好。

第一个选项仅在您自己编写指令时才有效，而在使用 ionic 等指令时则无效。它还要求您将多个指令写为一个，这很快就会变得非常困惑。这个巨大的指令将变得难以测试，并且在将来维护它时很容易搞砸。请注意，这是从 View 将数据传递到指令的正确方法，只是不适合此特定用例。

第二个选项是有问题的，因为过于混淆了事情。如果有人阅读你的 html 并看到一个名为 dynamic 的指令，该指令给出了动态数据......他们不知道会发生什么。如果他们看到一个名为 dropdown 的指令，并给出一个列表，他们就会清楚地知道结果是什么。可读性很重要，不要吝啬。

所以我会建议一些更简单的方法，需要你做更少的工作。只需使用 switch :

<div ng-switch="type">
    <mydir-select ng-switch-when="select"></mydir-select>
    <mydir-checkbox ng-switch-when="checkbox"></mydir-checkbox>
</div>