Question

我在使用templateUrl的隔离范围时遇到了麻烦。

我的指示测试：

beforeEach(ngModule('app.directives'));
  var scope, compile
  beforeEach(inject(function($rootScope, $compile){
    scope = $rootScope.$new();
    compile = $compile;
  }));

  it('Replaces the element with the appropriate content', function(){
    var element = compile('<download-detail-header></download-detail-header>')(scope);
    expect(element.html()).to.equal('<p>Hello World!</p>');
  });

我的指示：

function downloadDetailHeader() {
  return {
    restrict: 'EA',
    scope: {},
    template: '<p>Hello World!</p>'
    // templateUrl: 'download_detail_header/views/downloadHeader.html'
  }
}

downloadHeader.html

<p>Hello World!</p>

测试通过模板，似乎因为ng-isolate-scope被添加到指令元素的类中。测试未通过提供的templateUrl传递，并且没有在指令元素上放置ng-isolate-scope。

有人能解释一下这个问题吗？

Answer 1

@Claies评论是正确的。当您在指令中引用模板文件时，angular必须获取它。它推迟编译和链接，直到它加载模板。您的测试是在获取模板之前评估结果。

您可以在脚本标记中包含该模板，也可以在运行测试之前使用$ templateCache.put（）方法手动将模板放入缓存中。

beforeEach(ngModule('app.directives'));
  var scope, compile
  beforeEach(inject(function($rootScope, $compile, $templateCache){
    scope = $rootScope.$new();
    compile = $compile;
    $templateCache.put('downloadHeader.html', '<p>Hello World!</p>');
  }));

  it('Replaces the element with the appropriate content', function(){
    var element = compile('<download-detail-header></download-detail-header>')(scope);
    expect(element.html()).to.equal('<p>Hello World!</p>');
  });

ng-isolate-scope未附加到templateUrl

1 个答案: