javascript - 在 Angular 中添加带有指令的元素

Question

我在 Angular 中动态添加一个元素。代码如下。

myelement.after('<input ng-model="phone" id="phone">');

元素被添加并且一切正常。但是我认为我错过了一个步骤并且 Angular 无法识别新元素，因为当我稍后收集数据时，未定义动态添加的元素的值。

动态添加元素的原因是输入的数量从一开始就不知道，用户可以根据需要添加任意数量的输入。实际代码是这样的:

myelement.after('<input ng-model="phone"' + counter + ' id="phone' + counter + '">');

对不起，我应该从一开始就提供完整的样本。请查看以下 jsfiddle，添加一些电话(带有值)并列出它们:http://jsfiddle.net/kn47mLn6/4/

请注意，我没有创建任何新指令。我只使用 Angular 标准指令，我不想为这项工作创建自定义指令(除非需要)。

Answer 1

假设您要使用指令向 DOM 添加元素。您可以使用内置的 Angular 服务 $compile。 首先将 $compile 服务注入(inject)你的指令。然后在指令的链接函数中，获取要在其后附加元素的 myElement。然后使用 angular.element() 创建你的元素。然后使用 $compile 服务编译它并传递你现在所在的范围。(这里这个范围是指令范围)。获得编译后的 dom 元素后，您可以将其附加到您的 myElement 之后。

这是一个关于如何从指令动态添加元素的例子:

var elementToBeAdded = angular.element('<input ng-model="phone" id="phone">');
elementToBeAddedCompiled = $compile(elementToBeAdded)(scope);
myElement.append(elementToBeAddedCompiled);

如果您在指令中使用 $compile 服务添加元素，angular 将识别您动态添加的元素。