为什么Angular.element/jqlite找不到顶级元素？

在为角度视图编写Mocha/Chai测试时，我发现jqlite（因为我没有使用jQuery）不会找到顶级元素。为什么Angular.element/jqlite找不到顶级元素？

我煮下来到一个简单的例子：

/* jshint expr:true */ 
describe("View", function() { 
    'use strict'; 

    var $compile, $rootScope; 
    beforeEach(inject(function(_$compile_, _$rootScope_) { 
      $compile = _$compile_; 
      $rootScope = _$rootScope_; 
    })); 

    var view; 
    beforeEach(function() { 
     var html = "<div><span>div[0].span</span><p>div[0].p</p></div><div><h1>div[1].h1</h1><p>div[1].p</div>"; 
     view = $compile(angular.element(html))($rootScope); 
    }); 

    it("should find two p tags", function() { 
     expect(view.find("p").length).to.equal(2); 
    }); 

    it("should find one span tag", function() { 
     expect(view.find("span").length).to.equal(1); 
    }); 

    it("should find two div tags", function() { 
     expect(view.find("div").length).to.equal(2); 
    }); 


});

在这个例子中，前两个测试通过，第三失败：

View 
    ✓ should find two p tags 
    ✓ should find one span tag 
    ✗ should find two div tags 
    AssertionError: expected 0 to equal 2 
     at ...

这似乎是因为申报单是顶级元素，span和p标签在它们下面。如果我把所有东西都放在另一个标签中，第三个测试就会开始通过。

为什么？

来源

2014-10-09 Geoffrey Wiseman

注：使用jQuery，至少，你可以使用['.filter（） ']（http://api.jquery.com/filter/）搜索集合中的元素（顶层）。默认情况下，jqlite似乎没有定义该方法的等价物。 – 2014-10-09 15:47:41

.find只搜索后代所以答案将为0

从http://api.jquery.com/find/

如果提供的jQuery代表了一组DOM元件，所述 .find（）方法允许我们搜索DOM树中这些元素的后代，并从匹配元素构建一个新的jQuery对象。该.find（）和。孩子（）方法是相似的，但后者只行进的单级下调DOM树

来源

2014-10-09 15:38:20 Dreamwalker

是的，我知道.find（）搜索后代，但我想我以上看起来更像一个文档而不是一组匹配元素 - 所以所有的标签感觉像后代。更改视角有助于 - 它更像是编译视图中的所有顶层元素都是一组匹配元素中的项目，而.find（）正在搜索其子项。 – 2014-10-09 16:01:33

因此，如果我正在做一个视图测试，并且我想要找到一个顶级元素，那么我将不得不迭代angular.element中的所有项目并检查它们的标记名称，我猜？我没有看到从jqlite中获得我想要的另一种方式。 – 2014-10-09 16:05:47

是的，我想是的。或者每次在单独的div中包装测试测试模板 – Dreamwalker 2014-10-09 18:46:47

为什么Angular.element/jqlite找不到顶级元素？

回答

相关问题