Javascript AngularJS指令在AngularJS中不起作用

我有一个简单的Angular 7组件，用于规范化页面标记

page-title.component.ts

page-title.component.html

该指令非常简单，但当我在Angular

my page title

component中使用它时：

<my-page-title>
    <div is-granted="role">Whatever</div>
</my-page-title>

<div class="panel panel-default">
  <div class="panel-heading" *ngIf="title">
    <h3 class="panel-title">{{ title }}</h3>
  </div>
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>

(function () {
  function IsGrantedDirective(AuthManager) {
    return {
      restrict: 'A',
      link(scope, elem, attr) {
        if (AuthManager.isGranted(attr.isGranted)) {
          return;
        }
        console.log("I'm called");
        elem.remove();
      },
    };
  }

  angular
    .module('my.common')
    .directive('isGranted', IsGrantedDirective);
}());

<my-page-title>
    <div is-granted="role">Whatever</div>
</my-page-title>

 <my-page-title>
     <div> // <----
         <div is-granted="role">Whatever</div>
     </div>
 </my-page-title>