angularjs - Angular jqLit​​e : . find() 不起作用 - 不选择标签

Question

我在 Jasmine 中有这个单位规范:

define(['common/components/directives/directives', 'angular'], function (directives, ng) {

describe('The directives module', function () {

    beforeEach(function () {
        ng.mock.module('directives');
    });

    describe('The tabset directive', function () {
        var scope;
        var elm;

        beforeEach(inject(function($rootScope, $compile) {
            elm =   ng.element('<tabset>' +
                            '<tab data-route="/home" data-title="Home"></tab>' +
                            '<tab data-route="/tournaments" data-title="Tournaments"></tab>' +
                            '<tab data-route="/about" data-title="About"></tab>' +
                        '</tabset>');

            var scope = $rootScope;
            $compile(elm)(scope);
            scope.$digest();
        }));

        it ('should create clickable titles', function () {
            var titles = elm.find('ul li a');

            expect(titles.length).toBe(3);
            expect(titles.eq(0).text()).toBe('Home');
            expect(titles.eq(0).text()).toBe('Tournaments');
            expect(titles.eq(0).text()).toBe('About');
        });

        //it ('should change active tab when clicked', function () {

        //});

    });
});

});

在测试中 it ('should create clickable title', ... 我尝试使用 .find()，但选择结果为空:LOG: Object{}。这是 elm 在测试中包含的内容:

LOG: Object{0: 
<ul class="nav nav-tabs ng-scope" ng-transclude="">
    <li data-ng-class="{active: active}" data-route="/home" data-title="Home" class="ng-scope">
        <a href="#/home" class="ng-binding">Home</a>                                       
    </li>
    <li data-ng-class="{active: active}" data-route="/tournaments" data-title="Tournaments" class="ng-scope">
        <a href="#/tournaments" class="ng-binding">Tournaments</a>                                 
    </li>
    <li data-ng-class="{active: active}" data-route="/about" data-title="About" class="ng-scope">                                           
        <a href="#/about" class="ng-binding">About</a>                                     
    </li>
</ul>, length: 1}

Answer 1

el.find() 尝试在 el 的子元素、它们的子元素等集合中查找元素。您正在尝试查找 ul 元素是 ul 本身，并且仅包含 li 元素。此外，您不能在 find 中使用子选择器。请改用链式 el.find('li').find('a')。