2014-04-03 44 views
2

我目前正在尝试使用QUnit为我的Angular指令设置单元测试。在我尝试使用ngInclude指令之前,一切都很顺利。错误当使用ngInclude w/QUnit的单元测试AngularJS指令

未知的提供:在测试编译我的指令,当我现在收到以下错误 - $ rootElement的< - $位置< - $ anchorScroll < - $ rootElementProvider < ngIncludeDirective

简单地改变我的指令的模板来自:

<table> 
    <tr data-ng-repeat="row in rows"> 
     <td data-ng-repeat="column in row.columns">{{ column.data }}</td> 
    </tr> 
</table> 

要:

<table> 
    <tr data-ng-repeat="row in rows"> 
     <td data-ng-repeat="column in row.columns">{{ column.data }}</td> 
    </tr> 
    <tr data-ng-include="'footerRow.html'" /> 
</table> 

足以启动错误。单元测试代码最简单的形式是:

QUnit.test('Directive renders something', function() { 
    var $injector = angular.injector(['ng', 'myModule']); 
    var $compile = this.$injector.get('$compile'); 
    var $scope = $injector.get('$rootScope').$new(); 
    // Build up the scope, call $compile, and get the error 
    var element = $compile('<div data-my-directive="" />')($scope); 
}); 

我猜我想的东西容易和明显的,但我一直在盯着太久。请随时证明我是对的。

回答

0

我认为这可能会有帮助,如果你把它放到JSFiddle中 - 你可能会看到这里发生了什么。

尝试修改此:

<tr data-ng-include="'footerRow.html'" />

这样:

<tr data-ng-include src="'footerRow.html'" />