Директива AngularJS не работает внутри Angular - PullRequest
Новая
       22

Директива AngularJS не работает внутри Angular

1 голос
/ 05 июля 2019

У меня есть простой компонент Angular 7, который я использую для нормализации разметки страницы.

страница-title.component.ts 

import { Component } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'my-page-title',
  templateUrl: './page-title.component.html',
  styleUrls: ['./page-title.component.css']
})
export class PageTitleComponent {
      @Input() title?: string;
}

страниц title.component.html 

<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>

Я понизил этот компонент с помощью библиотеки ngUpgrade, и он работает нормально, но есть одна проблема. В моем приложении AngularJS у меня есть следующая директива 

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

Директива довольно проста, но когда я использую ее где-то внутри Angular my-page-title component: 

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

Не работает:

  1. console.log("I'm called") работы
  2. в консоли нет ошибок
  3. div отображается в любом случае

Кажется, что elem.remove() не оказывает никакого влияния на угловой компонент, есть идеи, пожалуйста?

P.S. Кажется, это работает, если положить еще один элемент div вокруг элемента с атрибутом 

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