通过指令的 link 函数添加 angularjs material 元素

Question

我正在尝试通过指令的编译函数将 material 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 中添加元素时有效，但在我的例子中，我想通过创建该树视图的指令的 link 函数添加它。

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。

工作的 Plunker link：https://plnkr.co/edit/dKjanhRioFWtWcm4Hoki?p=preview

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

内部编译函数的示例：https://plnkr.co/edit/By9Io583s6ZxffLyrHTt?p=preview

通过指令的 link 函数添加 angularjs material 元素

add an angularjs material element via a directive's link function

angularjs

angularjs-directive