加载的脚本不适用于由angular指令加载的模板

Question

我使用materialize框架来处理我的前端ui。

我有一个加载数据表的指令：

app.blade.php

...
<div class="container">
  <div class="row">
    <employees></employees>
  </div>
</div>
...

app.js

...
app.directive('employees', function() {
  return {
    restrict: 'E',
    templateUrl: 'js/templates/employees.html'
  };
});
...

在employees.html中有一个依赖于materialize.js（materialize）的按钮

employees.html

...
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<!-- THIS IS NOT WORKING, BUTTON DOES NOT DROP WHEN CLICKED -->
<!-- i think the material js does not reach here -->
...

但是当我把它放在 app.blade.php 里面时它会起作用！

app.blade.php

...
<div class="container">
  <div class="row">
    <employees></employees>
  </div>
</div>
...
...
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<!-- THIS IS WORKING :D -->
...

按钮正在 app.blade.php 中，我已经加载了materialize.js脚本。但不在 employees.html 内部工作，该指南由指令templateurl加载。