Question

据我所知，已经多次询问过这个问题了。但我真的不明白。我无法弄清楚如何使用karma-ng-html2js-preprocessor测试指令。

我有以下内容：

var admin = angular.module('admin', []);

admin.controller('theMenu', ['$scope', function() {
     $scope.items = [{ link: 'a', desc: 'b' }];
}]).directive('backend', function() {
     return {
           scope: { menuItems: '=' },
           templateUrl: 'template/menuBar.html'
     }
});

然后我进行了以下测试：

describe('Test', function() {

     var $rootScope;
     var $controller;
     var $compile;
     var $templateCache;

    beforeEach(function() {
            module('admin');
    });

    beforeEach(function() {
            module('menuBar.html');
    });

    beforeEach(function() {
            inject(function(_$templateCache_, _$controller_, _$rootScope_, _$compile_) {
                    $controller = _$controller_;
                    $templateCache = _$templateCache_;
                    $rootScope = _$rootScope_;
                    $compile = _$compile_;
            });
    });

    it('', function() {
            var $scope = {};
            var controller = $controller('theMenu', { $scope: $scope });
            var element = $compile($templateCache.get('menuBar.html'))($rootScope);
            $rootScope.$digest();
            console.log(element.html());  //console output nothing. This is my problem;
            expect(element.html()).toEqual('...');
    });
});

我的模板是：

<ul>
    <li ng-repeat="r in menuItems">{{ r.link }}{{ r.desc }}</li>
</ul>

模块menuBar.html的代码如下。这是由karma-ng-html2js-preprocessor生成的：

angular.module('menuBar.html', []).run(['$templateCache', function($templateCache) {
    $templateCache.put('menuBar.html', '<ul><li ng-repeat="r in menuItems">{{ r.link }}{{ r.desc }}</li></ul>');
}]);

我相信我的代码一定有错误。我不知道为什么控制台输出是空的。我相信控制台输出将是

<ul><li>ab</li></ul>

提前感谢你指出我的错误。

如何使用TemplateUrl测试Angular指令？

0 个答案: