Question

我试图解决Angular Material中已知的自动填充错误，其中向自动完成添加任何类都不会转移到md-input-container子元素。跟踪错误here。在extending directives的角度维基上的一些基本指令之后，我最终采用以下方法来解决这个问题，我认为这会为我的所有输入容器添加正确的md-accent类。

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类添加到第一个，而不是第二个？第一个md-input-container本身就在页面上，第二个在md-auto-complete里面。我仍然是棱角分明的新手并试图找出何时执行此扩展。当它清楚地发现它们时，为什么不能附加到数组中的两个元素？我错过了什么？

Answer 1

由于这只是解决一个已知错误，并且我知道我的网站的设计，我想在所有md-input-container上使用md-accent类。以下是我为解决这个问题所做的工作：

.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函数的第二个参数来添加类。这现在让我对包含在输入容器中的所有输入进行一致的查看

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

1 个答案: