扩展 Angular Material 指令并将 class 添加到子节点

Question

我正在尝试解决 Angular Material 中自动完成的一个已知错误，其中向自动完成添加任何 classes 都不会传递到 md-input-container 子元素.跟踪错误 here. Following some of the basic instructions on the angular wiki for extending directives，我最终采用以下方法来解决该问题，我认为这会将正确的 md-accent class 添加到我所有的输入容器中。

app.directive("mdAutocomplete", ["$window", function ($window) {

    "use strict";

    return {
        link: function (scope) {
            var containers = $window.document.getElementsByTagName("md-input-container");
            console.log(containers);
            console.log(containers.length);
            for(var i = 0; i < containers.length; i++){
                angular.element(containers[i]).addClass("md-accent");
            }
        }
    };


}]);

有了这个，我清楚地看到我的调试器中的输出指令扩展是运行，并在页面上找到了元素。它会发现以下两者：

0:md-input-container.md-icon-float.md-accent 1:md-input-container.ng-scope

我不明白的是为什么它在第一个而不是第二个上添加 md-accent class？第一个 md-input-container 单独在页面上，第二个在 md-auto-complete 中。我还是 angular 的新手，并试图弄清楚何时执行此扩展。为什么不能附加到数组中的两个元素，当它清楚地找到它们时？我错过了什么？

Answer 1

由于这只是解决一个已知错误，而且我知道我网站的设计，所以我希望所有 md-input-container 都带有 md-accent class。以下是我为解决此问题所做的工作：

.directive("mdInputContainer", [function () {
    "use strict";
    return {
        link: function (scope, element) {
            angular.element(element).addClass("md-accent");
        }
    };
}]);

与其尝试修改 md-autocomplete 的子 md-input-container，我发现更容易扩展 md-input-container 本身，使用 link 函数的第二个参数添加class。现在，这让我可以一致地查看包装在输入容器中的所有输入

扩展 Angular Material 指令并将 class 添加到子节点

Extend Angular Material directive and add class to child node

javascript

angularjs

angular-material

custom-directive