单元测试Angular指令访问外部元素

我有一个自定义指令,它使用一个属性来指定它修改的另一个控件.

指令定义对象:

{
    restrict: 'E',
    templateUrl: 'myTemplate.html',
    scope: {
        targetId: '@'
    },
    controller: MyController,
    controllerAs: 'vm',
    bindToController: true
}

指令控制器上的函数修改目标元素的内容(输入字段):

function onSelection (value) {
    var $element = $('#' + vm.targetId);

    $element.val('calculated stuff');
    $element.trigger('input');
}

单元测试(Jasmine/Karma/PhantomJS)当前将元素附加到页面.这有效,但它似乎是一种代码味道.

beforeEach(inject(function($rootScope, $compile) {
    var elementHtml = '' +
        '';

    scope = $rootScope.$new();    
    angularElement = angular.element(elementHtml);
    angularElement.appendTo(document.body);  // HELP ME KILL THIS!
    element = $compile(angularElement)(scope);
    scope.$digest();
}));

afterEach(function () {
    angularElement.remove();  // HELP ME KILL THIS!
});

我试过重写控制器函数以避免jQuery; 这没有用.

如何修改指令或测试以消除appendTo/remove？