Angular jqLit​​e：.find（）不起作用 - 不选择标签

Question

我在茉莉花中有这个单位规格：

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 titles', ...中，我尝试使用.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

您不能以这种方式使用.find方法。使用它像：

elm.find('a');

或者：

elm.find('ul').find('li').find('a');

看看：http://jsfiddle.net/Khp4R/2/

Answer 2

el.find()尝试在el个孩子，他们的孩子等中找到一个元素。您正在尝试在ul元素中找到ul本身并且仅包含li个元素。此外，您无法在find中使用子选择器。请改为使用链式el.find('li').find('a')。