0

我正在尝试解决 Angular Material 中用于自动完成的一个已知错误，在该错误中，将任何类添加到自动完成不会被传递到 md-input-container 子元素。在此处跟踪错误。遵循 angular wiki 上用于扩展指令的一些基本说明，我最终采用了以下方法来解决该问题，我认为这会将正确的 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 内。我仍然是 Angular 的新手，并试图弄清楚何时执行此扩展。当它清楚地找到它们时，为什么不能附加到数组中的两个元素？我错过了什么？

4

1 回答 1

0

因为这只是解决一个已知的错误，而且我知道我的网站的设计，所以我想要所有 md-input-containers 上的 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 本身。现在，这使我可以对包含在输入容器中的所有输入保持一致的外观

于 2017-06-29T05:03:37.550 回答