angular.js - angularjs requirejs templat arahan karmaUrl gagal (aduh)
巴扎黑
巴扎黑 2017-05-15 16:56:31
0
1
541

Struktur direktori

--awam
----skrip
--------*/.js // fail sudut
--test
-- --*/.js // Uji fail
--pandangan
----templat
--------*/.html //directive templateUrl file

memerlukan fail utama ujian

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
});

fail konfigurasi karma

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'
    }
  });
}

fail ujian arahan

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');
    });
  });
});

fail author-signature.js direktif

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'
    };
  });
});

tandatangan-pengarang.html

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

fail angular-app.js

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

Soalan

  1. Tukar templateUrl arahan author-signature.js kepada borang templat, dan ujian berjaya;

  2. Dengan melihat pemuatan dan penyahpepijatan fail sumber, anda boleh melihat bahawa author-signature.html telah ditukar kepada .js dan kandungan telah dimuatkan ke dalam $templateCache, seperti yang ditunjukkan dalam tangkapan skrin di bawah:

Tetapi ujian itu gagal dan $compile gagal.

Bantuan

Apabila angular memperoleh kandungan $templateUrl, ia akan memperolehnya daripada $templateCache secara lalai dan bukannya terus mendapatkan fail sisi pelayan tidak memperolehnya daripada $templateCache . Saya tidak tahu sama ada sesiapa boleh membantu saya mengetahui di mana masalahnya?

巴扎黑
巴扎黑

membalas semua(1)
Ty80

OMG, saya terlupa menambah $rootScope.$digest(); dalam arahan ujian.
Itu menyebabkan atribut skop arahan ini tidak berubah.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan