Javascript 在链接到外部DOM元素的指令上设置角度单元测试

这是我的测试设置。我将向$document添加两个元素，并希望它们可用于我的指令进行测试

beforeEach(inject(function ($compile, $rootScope, $document) {
   var scope = $rootScope.$new();
   var element = $compile('<div id="inputId"></div>')(scope);
   var myDirective = $compile('<div my-directive my-directive-attr="inputId"></div>')(scope)
   angular.element($document[0].body).append(element);
   angular.element($document[0].body).append(myDirective);
   scope.$digest();
});

---

控制台日志在指令中拾取null。让$document中的元素模拟整个$document服务的唯一方法是什么

我能够解决这个问题。在这里，向$document和$compile添加元素的顺序至关重要

初始代码的问题是myDirective元素的$compile发生在将该元素添加到$document之后。正确的测试代码应为-

beforeEach(inject(function ($compile, $rootScope, $document) {
  var scope = $rootScope.$new();
  var element = $compile('<div id="inputId"></div>')(scope);
  angular.element($document[0].body).append(element);      
  var myDirective = $compile('<div my-directive my-directive-attr="inputId"></div>')(scope);
});

beforeach（注入函数（$compile、$rootScope、$document）{
var scope=$rootScope.$new（）；
变量元素=$compile（“”）（范围）；
元素（$document[0].body）.append（元素）；
var myDirective=$compile（“”）（范围）；
});

“link”方法中的代码是在编译myDirective元素时触发的。因此，我们需要确保在调用$compile之前，初始元素已经添加到$document中。这确保了“element”在指令的链接阶段可用

---

另外，请注意，出于测试目的，myDirective元素实际上不需要添加到$document中。

您不需要将其附加到任何地方，当然，如果我使用类似angular.element（$document[0].body）的东西将其直接附加到dom中，它是

null

@dfsq），当$document被注入其他地方（即我的实际指令代码）时，它是否可用？@Blake是的，它应该可以工作。但是不要忘记在afterEach（）中从$document中删除元素block，否则它将污染文档并可能影响其他测试用例。@runTarm我已根据您的回答更新了问题。但是，在指令中，我的日志接收到空值。在编译myDirective之前，您是否尝试过追加inputId元素？

beforeEach(inject(function ($compile, $rootScope, $document) {
  var scope = $rootScope.$new();
  var element = $compile('<div id="inputId"></div>')(scope);
  angular.element($document[0].body).append(element);      
  var myDirective = $compile('<div my-directive my-directive-attr="inputId"></div>')(scope);
});