$ compile不编译Karma / Jasmine中的模板 [英] $compile not compiling templates in Karma/Jasmine

问题描述

我已经使用PhantomJS和Chrome对此进行了测试。

I have tested this with both PhantomJS and Chrome.

关注这个问题我试图在Karma的单元测试中访问生成的HTML代码：

Following this question I'm trying to get access to the generated HTML code in unit tests with Karma:

it('Should do something', inject(function ($rootScope, $templateCache, $compile) {
  var scope = $rootScope.$new();
  scope.$digest();

  var template = $templateCache.get('/app/views/mytemplate.html');
  var compiler = $compile(template);
  var compiledTemplate = compiler(scope);
  console.log(compiledTemplate);
}));

我发现正在正确获取模板，并且对应于原始HTML文件我的电脑。但是，compileTemplate从未正确编译;基本上，Angular会移除任何带有ng标记的div并用注释替换它们，无论它们的值是什么。

What I've found is that template is being fetched correctly, and corresponds to the raw HTML file on my computer. But compiledTemplate is never compiled correctly; basically, Angular is removing any ng-tagged divs and replacing them with comments, regardless of what their values should be.

例如，

<ol ng-repeat = "foo in foos">
  <li>foo</li>
</ol>

将始终替换为：

<!-- ngRepeat: foo in foos -->

即使我专门设置 scope.foos 在单元测试中的某些数组。我已经尝试添加waitsFor和setTimeout方法来强制Karma等待最多8秒，这仍然是我得到的行为。我还测试了CSS属性，并发现Karma正确设置它们。例如，ng-show或ng-hide div将具有预期的CSS属性，但对于应该修改已编译HTML的指令，所有内容都将被注释替换。

Even if I specifically set scope.foos to some array in the unit test. I have tried adding waitsFor and setTimeout methods to force Karma to wait up to 8 seconds, and this is still the behavior I get. I've also tested the CSS properties, and have found that Karma is setting them correctly. For example, an ng-show or ng-hide div will have the expected CSS properties, but for directives that are supposed to modify the compiled HTML, everything is being replaced by a comment.

有没有办法在单元测试中获得HTML的Angular-modified DOM结构？也就是说，不仅仅删除了角度div的HTML，而且Angular实际上将它更改为什么？

Is there any way to get the Angular-modified DOM structure of the HTML in unit tests? That is, not just the HTML with the angular divs removed, but what Angular is actually changing it to?

推荐答案

你应该这样做编译后的 $ digest（） 。在摘要之后， compiledTemplate.find（'ol'）（带有 scope.foos 作为某些数组）应该返回重复元素。

You should do a $digest() after compiling. After a digest, compiledTemplate.find('ol') (with scope.foos as some array) should return the ng-repeated elements.

这篇关于$ compile不编译Karma / Jasmine中的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！