通过指令的链接功能添加angularjs材质元素

Question

我试图通过指令的编译功能将材料angularjs md-input-container添加到DOM中，如下所示：

element.after(`
    <md-input-container md-theme-watch="true" flex>
        <label for="sampletext1">Champ texte</label>
        <input name="sampletext1" type="text"
               class="ng-tree-search">
    </md-input-container>
`)

但是当我打开页面时，该元素失去了它的默认行为，看起来像这样：

相反它应该是这样的：

这仅在我在html中添加元素时才有效，但在我的情况下，我想通过创建该树视图的指令的链接函数添加它。

Answer 1

您需要首先在指令的link函数中编译元素的模板。这是你如何做到的：

var elemHtml = `
            <md-input-container md-theme-watch="true" flex>
                <label for="sampletext1">Champ texte</label>
                <input name="sampletext1" type="text"
                       class="ng-tree-search">
            </md-input-container>
        `;
element.after($compile(elemHtml)(scope));

不要忘记在指令的函数中传递$ compile。

Working Plunker链接：https://plnkr.co/edit/dKjanhRioFWtWcm4Hoki?p=preview

有问题你在编译功能中说过你，但在标题中你说的是链接功能。实际上在编译函数中，你不需要在上面的例子中使用$ compile。 （但如果它需要内部链接功能）。

具有内部编译功能的示例：https://plnkr.co/edit/By9Io583s6ZxffLyrHTt?p=preview