Question

这是我的测试设置。我在$ 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();
});

这是我的指令的一部分。我试图根据传递给指令属性的ID引用$ document上的元素。

angular.module('myModule',[])
.directive('myDirective', function ($document) {
  return {
    restrict: 'A',
    link: function (scope, el, attrs) {
      var inputId = attrs.myDirectiveAttr;
      var fromDocument = $document[0].getElementById(inputId);
      console.log(fromDocument);
    };
  });

控制台日志在指令中拾取空值。唯一的方法是在$ document中使用元素来模拟整个$ document服务吗？

Answer 1

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

初始代码的问题是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);
});

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

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

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

1 个答案: