如何将属性复制到内部元素答案

【问题标题】：How to Copy Attributes to Inner Element如何将属性复制到内部元素
【发布时间】：2013-10-18 15:01:29
【问题描述】：

我正在为 AngularJS 编写一个非常简单的指令，它应该可以转换如下内容：

<input type="text" name="FirstName" mydirectivename />

变成这样：

<span><input type="text" name="FirstName" /></span>

很容易到达这里：

<span type="text" name="FirstName"><input/><span>

但是现在我正在编写一个编译函数来做文档中说的“你应该很少需要做”的事情，我认为我偏离了轨道。有没有一种简单的方法来指示模板中的特定元素应该是复制属性的目标？

谢谢

【问题讨论】：

看看这个方法：stackoverflow.com/a/42319665/913845

标签： angularjs angularjs-directive

【解决方案1】：

对于您的简单示例，您可以使用如下内容：http://plnkr.co/edit/BbwBLa?p=preview

plunker 将嵌入原始元素并将其重新插入到包装元素中。

或者，您可以按照其他答案并指定要复制的所有内容，以获得更多控制权。

如果您需要复制所有属性，并且您有足够新的 angular 版本（1.1.4 及更高版本，请查看文档http://code.angularjs.org/1.1.4/docs/guide/directive），那么您可以尝试在链接。这些被赋予了所有原始元素的属性，并且可以使用它们来编写具有原始属性的新模板。我不建议以这种方式使用模板函数，因为它对我来说有点过于繁琐。

编辑

这在您的简单示例中完成了您想要的操作，非常简单，在链接功能中。我认为这真的应该在编译中，但是当我把它放在那里时，plunker 发疯了。 http://plnkr.co/edit/PLfSU6?p=preview

【讨论】：

其实在下面阅读你的cmets，我想这也会保留外部元素上的原始属性。所以只是更多的选择来做同样的事情......
是的，我实际上已经通过几种不同的方式实现了这个工作，但我认为我不是以正统的方式来做这件事，我只是想在这一点上学习。例如，我可以在链接委托中轻松完成此操作，但这是一个非常简单的示例。我认为，如果您有一个更复杂的模板，您不会想编写一堆代码来创建必要的元素。我也可以使用 compile 属性来做到这一点，但是对于如此简单的事情，我必须编写的代码量似乎非常荒谬——与几十行相比，这只是一小行 jQuery 代码。

【解决方案2】：

怎么样：

.directive("mydirectivename", function ($state) {
        return {
            restrict: "A",
            replace: true,
            template: '<span ng-transclude></span>',

【讨论】：

如果你能解释更多关于这段代码的作用，那会更有帮助

【解决方案3】：

试试：

.directive("myDirective", function ($state) {
        return {
            restrict: "E",
            replace: true,
            controller: function(){},
            template: function (element, attrs) {}

【讨论】：