Karma 在测试中编译 Angular 指令答案

【问题标题】：Karma compiling Angular directive in testKarma 在测试中编译 Angular 指令
【发布时间】：2014-03-10 16:38:06
【问题描述】：

您好，我正在尝试在 Karma 测试中编译 Angular 指令，如下所示：

 describe("Midway: Testing My App", function() {
    var $compile, $rootScope;
    beforeEach(module('KSSApp'));
    beforeEach(inject(
        ['$compile','$rootScope', function($c, $r) {
        $compile = $c;
        $rootScope = $r;
        }]
    ));

    it("should compile the widget", function() {
       var element = $c('<My-app></My-app>')($r);
       console.log(element);
    });

});

不过，这只是向元素添加了一个 ng-scope 类，并没有编译完整的指令。

【问题讨论】：

这段代码是正确的——KSSApp 是否在其中定义了一个具有template 或templateUrl 的指令？
@EdHinchliffe 是的，我的应用有一个模板 url。
@EdHinchliffe 这就是我希望它加载的部分。
好的，您使用的是预编译的 javascript 模板，还是只是一个 HTML 文件？
@EdHinchliffe 只是模板文件的 html。

标签： angularjs karma-runner

【解决方案1】：

您可能需要运行一个摘要循环，而且我认为您已经反转注入和测试变量（$scompile 和 $rootScope）：

describe("Midway: Testing My App", function() {
    var $compile, $rootScope;
    beforeEach(module('KSSApp'));
    beforeEach(inject(
        ['$compile','$rootScope', function($c, $r) {
        $compile = $c;
        $rootScope = $r;
        }]
    ));

    it("should compile the widget", function() {
       // You're out of the inject function so I used full variable names
       var element = $compile('<My-app></My-app>')($rootScope);

       // run a digest loop
       $rootScope.$digest();
       console.log(element);
    });

});

【讨论】：