Angularjs $compile在单元测试中不工作

我是angular的新手，正在尝试处理测试，但在一个看似愚蠢的问题上被难住了一段时间，也许这是因为对$compile缺乏理解。我将我的单元测试代码归结为以下几点：

it('should create a table', inject(['$compile', '$rootScope', function ($compile, $rootScope) {
    var element;
    var scope = $rootScope.$new();
    scope.list = [{name: 'tst'},{name:'sae'},{name:'dkos'}]
    element = angular.element('<ul><li ng-repeat="p in list">{{p.name}}</li></ul>');
    element = $compile(element)(scope);
    expect(element.find('li').length).to.equal(3);
}]));

it（'should create a table'，inject（['$compile'，'$rootScope'，function（$compile，$rootScope）{
var元素；
var scope=$rootScope.$new（）；
scope.list=[{name:'tst'}，{name:'sae'}，{name:'dkos'}]
element=angular.element（“
{{p.name}
”）；
元素=$compile（元素）（范围）；
expect（element.find（'li'）.length.）to.equal（3）；
}]));

当我运行业力时，我收到以下失败：

$ grunt karma:unit
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 33.0.1750 (Mac OS X 10.9.2)]: Connected on socket 6K3QkOOLMEYRkZco3rY3
Chrome 33.0.1750 (Mac OS X 10.9.2) Directive: ngTabled should create a table FAILED
    AssertionError: expected 0 to equal 3
        at Context.<anonymous> (/Users/andyperlitch/js/ng-tabled/test/spec/directives/ng-tabled.js:22:44)
        at Object.invoke (/Users/andyperlitch/js/ng-tabled/app/bower_components/angular/angular.js:3697:17)
        at Context.workFn (/Users/andyperlitch/js/ng-tabled/app/bower_components/angular-mocks/angular-mocks.js:2102:20)
        at callFn (/Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4338:21)
        at Test.Runnable.run (/Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4331:7)
        at Runner.runTest (/Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4728:10)
        at /Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4806:12
        at next (/Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4653:14)
        at /Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4663:7
        at next (/Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:4601:23)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/Users/andyperlitch/js/ng-tabled/app/bower_components/angular-mocks/angular-mocks.js:2087:25)
        at Suite.<anonymous> (/Users/andyperlitch/js/ng-tabled/test/spec/directives/ng-tabled.js:16:31)
        at context.describe.context.context (/Users/andyperlitch/js/ng-tabled/node_modules/mocha/mocha.js:955:10)
        at /Users/andyperlitch/js/ng-tabled/test/spec/directives/ng-tabled.js:3:1
Chrome 33.0.1750 (Mac OS X 10.9.2): Executed 1 of 1 (1 FAILED) ERROR (0.21 secs / 0.029 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.


Execution Time (2014-03-31 06:41:05 UTC)
karma:unit  2.5s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Total 2.5s

$grunt karma:单位
运行“业力：单位”（业力）任务
信息[karma]：karma v0.10.10服务器在启动http://localhost:9876/
信息[launcher]：启动浏览器Chrome
信息[Chrome 33.0.1750（Mac OS X 10.9.2）]：连接在插座6K3QkOOLMEYRkZco3rY3上
Chrome 33.0.1750（Mac OS X 10.9.2）指令：ngTabled应创建表失败
AssertionError:预期0等于3
在上下文中。（/Users/andyperlich/js/ng tabled/test/spec/directives/ng tabled.js:22:44）
在Object.invoke（/Users/andyperlich/js/ng tabled/app/bower\u components/angular/angular.js:3697:17）
位于Context.workFn（/Users/andyperlich/js/ng tabled/app/bower_components/angular mocks/angular mocks.js:2102:20）
在callFn（/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4338:21）
在Test.Runnable.run（/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4331:7）
在Runner.runTest（/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4728:10）
at/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4806:12
接下来（/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4653:14）
at/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4663:7
接下来（/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:4601:23）
错误：声明位置
在window.inject.angular.mock.inject（/Users/andyperlich/js/ng tabled/app/bower_components/angular mock/angular mock.js:2087:25）
在套房。（/Users/andyperlich/js/ng tabled/test/spec/directives/ng tabled.js:16:31）
位于context.descripe.context.context（/Users/andyperlich/js/ng tabled/node_modules/mocha/mocha.js:955:10）
at/Users/andyperlich/js/ng tabled/test/spec/directives/ng tabled.js:3:1
Chrome 33.0.1750（Mac OS X 10.9.2）：执行1/1（1失败）错误（0.21秒/0.029秒）
警告：任务“因果报应：单位”失败。使用--force继续。
由于警告而中止。
执行时间（2014-03-31 06:41:05 UTC）
因果报应：单元2.5s▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
总计2.5秒

我正为此焦头烂额，所以任何帮助都会很好！如有必要，我很乐意提供更多细节

---

Andy

在调用

$compile（）

之后，它似乎需要调用

作用域$digest（）

，以便

ng repeat

在列表上运行。因此，您的测试可以是：

it('should create a table', inject(['$compile', '$rootScope', function ($compile, $rootScope) {
  var element;
  var scope = $rootScope.$new();
  scope.list = [{name: 'tst'},{name:'sae'},{name:'dkos'}]
  element = angular.element('<ul><li ng-repeat="p in list">{{p.name}}</li></ul>');
  element = $compile(element)(scope);
  scope.$digest();
  expect(element.find('li').length).toEqual(3);
}]));

it（'should create a table'，inject（['$compile'，'$rootScope'，function（$compile，$rootScope）{
var元素；
var scope=$rootScope.$new（）；
scope.list=[{name:'tst'}，{name:'sae'}，{name:'dkos'}]
element=angular.element（“
{{p.name}
”）；
元素=$compile（元素）（范围）；
范围。$digest（）；
expect（element.find（'li'）.length）.toEqual（3）；
}]));

---

这可以在的操作中看到，它似乎需要在调用

$compile（）

之后调用

作用域。$digest（）

，以便在列表上运行

ng repeat

。因此，您的测试可以是：

it('should create a table', inject(['$compile', '$rootScope', function ($compile, $rootScope) {
  var element;
  var scope = $rootScope.$new();
  scope.list = [{name: 'tst'},{name:'sae'},{name:'dkos'}]
  element = angular.element('<ul><li ng-repeat="p in list">{{p.name}}</li></ul>');
  element = $compile(element)(scope);
  scope.$digest();
  expect(element.find('li').length).toEqual(3);
}]));

it（'should create a table'，inject（['$compile'，'$rootScope'，function（$compile，$rootScope）{
var元素；
var scope=$rootScope.$new（）；
scope.list=[{name:'tst'}，{name:'sae'}，{name:'dkos'}]
element=angular.element（“
{{p.name}
”）；
元素=$compile（元素）（范围）；
范围。$digest（）；
expect（element.find（'li'）.length）.toEqual（3）；
}]));

这一点可以在行动中看到