angularjs requirejs 业力指令 templateUrl 测试失败

Question

问题

• 我将 author-signature.js 中的 templateUrl 替换为 template，然后测试成功。
• 但我在 author-signature.js 中使用 templateUrl 方式，我测试失败。我观察文件加载和 chrome 调试，author-signature.html 确实转换为 js，并且 $templateCache 中也确实存在 html 内容，但我测试失败。打印屏幕：
  author-signature.html.js
  $templateCache debug content
  

文件路径

- 民众 ----脚本 --------**/*.js - 测试 ----**/*.js --views ----模板 --------**/*.html

test-main.js

require.js 主入口文件

var allTestFiles = [];
var TEST_REGEXP = /(\-test)\.js$/i;

Object.keys(window.__karma__.files).forEach(function (file) {
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (TEST_REGEXP.test(file)) {
            allTestFiles.push(file);
        }
    }
});

require.config({
    baseUrl: '/base/public/scripts',
    paths: {
        'jquery': '../libs/jquery/dist/jquery',
        'angular': '../libs/angular/angular',
        'angularMocks': '../libs/angular-mocks/angular-mocks',
        'templates': '../../views/templates'
    },
    shim: {
        'angular': {
            deps: ['jquery'],
            exports: 'angular'
        },
        'angularMocks': {
            deps: ['angular'],
            exports: 'angular.mock'
        },
        'templates/default/author-signature.html': ['angular']
    },
    deps: allTestFiles,
    callback: window.__karma__.start
});

karma.conf.js

karma配置文件，我通过ng-html2js将js翻译成html

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', 'requirejs'],
        files: [
            {pattern: 'public/libs/jquery/dist/jquery.js', included: false},
            {pattern: 'public/libs/angular/angular.js', included: false},
            {pattern: 'public/libs/angular-mocks/angular-mocks.js', included: false},
            {pattern: 'public/scripts/**/*.js', included: false},
            {pattern: 'views/templates/**/*.html', included: false},
            {pattern: 'test/**/*-test.js', included: false},
            'test/test-main.js'
        ],
        exclude: [
            'public/scripts/build-main.js',
            'public/scripts/require-config.js',
            'public/scripts/bootstrap.js'
        ],
        browsers: ['Chrome'],
        reporters: ['progress', 'html', 'coverage'],
        htmlReporter: {
            outputFile: 'report/units.html',
            pageTitle: 'Unit Tests',
            subPageTitle: 'Unit tests with karma jasmine'
        },
        preprocessors: {
            'public/scripts/**/*.js': ['coverage'],
            'views/templates/**/*.html': ['ng-html2js']
        },
        coverageReporter: {
            type: 'html',
            dir: 'report/coverage/'
        },
        ngHtml2JsPreprocessor: {
            stripPrefix: 'views/',
            stripSuffix: '.html',
            moduleName: 'templates'
        }
    });
}

作者签名测试.js

指令测试文件

define(['angularMocks', 'directives/default/author-signature', 'templates/default/author-signature.html'], function () {
    describe('Unit: Hello Directive', function () {
        var $compile, $rootScope;
        beforeEach(function () {
            module('angularApp');
            module('templates');
            inject(function (_$compile_, _$rootScope_) {
                $compile = _$compile_;
                $rootScope = _$rootScope_;
            });
        });

        it('should display the hello text properly', function () {
            var elt = $compile('<author-signature author="Plus"></author-signature>')($rootScope);
            expect(elt.text()).toEqual('Plus');
        });
    });
});

作者签名.js

简单的指令文件

define('directives/default/author-signature', [
    'angular-app'
], function (angularApp) {
    angularApp.directive('authorSignature', function () {
        return {
            restrict: 'EA',
            scope: {
                author: '@'
            },
            replace: true,
            templateUrl: 'templates/default/author-signature'
        };
    });
});

作者签名.html

<h1>{{author}}</h1>

angular-app.js

define('angular-app', [
    'angular'
], function (angular) {
    var angularApp = angular.module('angularApp', []);
    return angularApp;
});

Answer 1

天哪，我忘了在测试指令中添加 $rootScope.$digest(); 。
这导致该指令作用域的属性不会改变。