即使在运行 digest() 之后，在测试中编译 angular 指令也会失败

Question

我正在尝试以 Angular 测试指令，但编译无法正常工作，即使在我运行 $scope.$digest() 之后也是如此。

指令的模板如下所示：

<div>
    <knob>...</knob>
    <knob>...</knob>
    <knob>...</knob>
</div>

测试看起来像这样：

describe('DirectiveTest', function() {

    beforeEach(module('AppTestModule'));

    var directiveElem, $scope;

    beforeEach(inject(function ($rootScope, $compile, $q, $injector, $templateCache) {

        $scope = $rootScope.new();

        $scope.parameter1 = {};
        $scope.parameter2 = {};
        $scope.parameter3 = false;

        directiveElem = angular.element('<my-directive param1="parameter1" param2="parameter2" param3="parameter3"></my-directive>');
        $compile(directiveElem)($scope);

        $scope.$digest();

    }));

    it('should have three knobs', function() {
        $scope.$digest();
        console.log('directiveElem = ', directiveElem);
        var knobs = directiveElem.find('knob');
        expect(knobs.length).toEqual(3);
    });

});

测试失败（它没有找到任何knob 元素），因为指令没有被编译。

console.log 打印如下内容：

directiveElem = ', {0: <my-directive param1="parameter1" param2="parameter2" param3="parameter3" class="ng-scope"></my-directive>, length: 1}

（它只添加了 class="ng-scope"）

值得注意的是，我正在使用 ng-html2js 业力预处理器，并且我在 Chrome 中发现正在加载模板

Answer 1

不确定您为什么使用angular.element(...)。我通常使用这样的东西：

var elementHtml = '<my-directive></my-directive>';
element = $compile(elementHtml)(scope);
scope.$digest();

要查看生成的 html，您可以使用：

console.log(element.html());