Here is my experimental setup. I am including two elements into the $document, with the intention of making them accessible to my directive for testing purposes.
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();
});
Below is a snippet from my directive code. I am attempting to access the element on the $document based on the ID passed through the directive attribute.
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);
};
});
When the directive runs, the console displays null. Is there an alternative solution to having elements within the $document without needing to mock the entire $document service?