如何在 Angular 指令测试中按 ID 查找元素答案

【问题标题】：How To Find Elements By Id in Angular Directive Test如何在 Angular 指令测试中按 ID 查找元素
【发布时间】：2015-02-02 22:49:59
【问题描述】：

我有一个指令在单元测试中呈现以下 html：

<div id="published-envs">
    <strong>Published to</strong>
    <!-- ngRepeat: env in fundConfigurationVersion.publicationEnvironments --><div data-ng-repeat="env in fundConfigurationVersion.publicationEnvironments" class="ng-binding ng-scope">
            QA (Jan 29, 2015)
    </div><!-- end ngRepeat: env in publicationEnvironments --><div data-ng-repeat="env in publicationEnvironments" class="ng-binding ng-scope">
            PROD (Jan 30, 2015)
    </div><!-- end ngRepeat: env in publicationEnvironments -->
</div>

我正在尝试获取<div id="published-envs"> 并断言其中有两个孩子<div>。

我尝试了以下方法，但它不起作用： var environments = element.find('#published-envs'); //comes back empty

在角度单元测试中按 id 查找元素的正确方法是什么？

【问题讨论】：

标签： javascript angularjs jqlite

【解决方案1】：

根据Angular Element Docs，.find()

仅限于按标签名称查找

试试

var environments = angular.element(document.getElementById('published-envs')).find('div');

JSFiddle Example

编辑

对于编译后的标记，本质上是一样的，只需要注入$compile服务，如下使用

var comipledEnvironments = $compile(angular.element('<div id="published-envs"><div></div><div></div></div>'))($scope).find('div')

console.log(comipledEnvironments); // 2 <div>'s

Updated JSFiddle

【讨论】：

这不太行。我在单元测试中编译一个 html sn-p 如下：var element = angular.element('<div data-fund-config-version data-version-data="fundConfigurationVersion"></div>'); element = compile(element)(scope); scope.$digest(); 在这种情况下，我认为该文档不包含编译后的 html。我尝试记录文档，但没有看到指令呈现的 html。
应该是var comipledEnvironments = ($compile(angular.element('<div id="published-envs"><div></div><div></div></div>'))($scope)).find('div')