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

我的目标很简单，我有，我想传递一个<login></login>，一个<register></register>和其他组件作为一个attribue组件<modal></modal>使用的语法如下：如何将angularJS指令/组件作为属性传递给其他指令/组件？

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

但所有我得到模板模板内部为<login></login>。我的指令正在被清理，而不是编译。

我该如何做这项工作？

来源

2016-01-21 goncalomarques

几个可能的方法：

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

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; } 
}

来源

2016-01-21 14:58:56

一种方式是UI的自举了如何实现的：https://angular-ui.github.io/bootstrap/#/modal，但它可能是一个有点矫枉过正实施它为你自己，如果你还没有使用ui-bootstrap。它也带有使用控制器的缺点。

我宁愿丹尼尔纳尔巴赫的选择2只是为了简单的实现，除非你有大量的不同的指令，你想使用模态。

来源

2016-01-21 15:05:40 Spaideri

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

回答

相关问题