在templateUrl属性中使用指令

Question

我有一个以angular定义的指令，其功能如下：

function(){
  'use strict';
  return {
   restrict: 'E',
   replace: 'true',
   scope: {reusableScope: '='},
   template: '<div>' +
               '<cool-directive></cool-directive>' +
             '</div>',
};

coolDirective 是一个外部指令，在此设置中正常工作。但是，当我将模板放在.html文件中并通过 templateUrl 属性调用它时，在模板中定义的指令就完全停止了。

function(){
  'use strict';
  return {
   restrict: 'E',
   replace: 'true',
   scope: {reusableScope: '='},
   templateUrl: 'template.html',
};

template.html 这个：

<div>
  <cool-directive></cool-directive>
</div>

为什么会发生这种情况以及如何解决此问题？有解决方法吗？