Question

我的目标很简单，我有一个<modal></modal>组件，其中我想使用以下语法传递<login></login>，<register></register>和其他组件作为属性：

<modal directive="<login></login>"</modal>

但是我进入模态模板的所有内容都是<login></login>。我的指令正在消毒，而不是编译。

我该如何做到这一点？

Answer 1

有两种可能的方法：

1）在你的模态上使用ngTransclude指令允许它的模板用你在模态标签内嵌套的任何元素（包括其他指令）替换一个部分。请注意，这与指令选项transclude：true

不同

Angular docs for ngTransclude

2）不是传递指令作为属性，而是告诉模态指令是否在其自己的模板中启用该指令的实例的属性呢？

<modal use-login="true" use-register="true"></modal>

内部模态模板

<div>
  <login ng-if="enableLogin"></login>
  <register ng-if="enableRegister"></register>
</div>

模态js代码

link: function (scope, element, attrs) {
  if (attrs.useLogin) { $scope.enableLogin = true; }
  if (attrs.useRegister) { $scope.enableRegister = true; }
}

Answer 2

解决这个问题的一种方法是如何实现ui-boostrap：https://angular-ui.github.io/bootstrap/#/modal但如果你还没有使用ui-bootstrap，那么为你自己实现它可能有点过分。它还具有使用Controller的缺点。

我更喜欢Daniel Nalbach的选项2，只是为了简化实现，除非您有大量不同的指令要使用模态。

如何将angularJS指令/组件作为属性传递给其他指令/组件？

2 个答案: