javascript - Angular.js - 测试元素指令中的子元素数量

Question

我有一个简单的 ui-spinner element 指令。

.directive("uiSpinner", function () {    // If a size attribute with value large
    return {                             // is present, the spinner will be
        restrict: "E",                   // relatively large.
        scope: {
            spin: "@",
        },
        transclude: true,
        link: function (scope, element, attrs) {
            // NB: scope.size is not linked to the controller scope.
            // Because of the compilation process, it will only
            // detect static *inline* attributes. This should be
            // fine, because this attribute is static in practice.
            scope.size = "";
            if (attrs.size && attrs.size === "large") {
                scope.size = "large-";
            }

            scope.$watch('spin', function () {
                if (scope.spin === "true") {
                    element.find("#spinner").addClass(scope.size + "spin");
                } else {
                    element.find("#spinner").removeClass(scope.size + "spin");
                }
            });
        },
        template: "<div id='spinner'><div></div>&nbsp;</div>"
    };
})

在测试设置中，我试图验证它是否恰好有一个 child 。

describe('uiSpinner', function () {

    describe('template', function () {

        beforeEach(function () {
            directiveTemplate = "<ui-spinner spin='{{is_spinning}}'>" +
                                '</ui-spinner>';
            compiledEl = $compile(directiveTemplate)($scope);
        });

        iit("is comprised of a single element", function () {
            expect(compiledEl.find("*").length).toBe(2);
        });

    });

...

我之前尝试使用 compiledEl.children().length 对此进行测试，但它始终返回 1。我还尝试将 compiledEl 包装在 $ 或 中angular.element，结果还是一样。基本上，为什么我需要使用钝的 .find("*") 而不是使用 .children() 来选择我的指令的子项？

Answer 1

当你做 compiledEl.children()它总是返回 1 因为唯一的 child 是 <div id='spinner'></div> .

如果您要查找的是 #spinner 的 child 数量div，你需要做compiledEl.children().eq(0).children().length或 compiledEl.find('#spinner').children().length .