Угловая составляющая 1,5 против директивы ng-transclude

Question

В настоящее время я пытаюсь выяснить, почему моя директива или мой компонент ведут себя по-разному при использовании transclude: true.

Navigation.hbs

<my-custom-element ng-transclude>
  <div>
    <h3>Scope: {[{$ctrl.test}]}</h3>
  </div>
</my-custom-element>

директива

function CustomDirective() {
  return {
   restrict: 'E',
   replace: true,
   controller: MyController,
   controllerAs: '$ctrl',
   transclude: true
  }
}

export function register(ngModule) {
  ngModule.directive('myCustomElement', CustomDirective);
}

Составная часть

const CustomComponent = {
  controller: MyController,
  transclude: true,
  replace: true,
};

export function register(ngModule) {
  ngModule.component('myCustomElement', CustomComponent);
}

контроллер

export default class MyController {
  constructor() {
    this.test = 'this is just a teststring';
  }
}

Пояснение У меня есть серверные отрисованные шаблоны руля. На стороне клиента я хочу добавить немного логики к моему мнению. Идея состоит в том, чтобы взять существующее представление и привязать к нему компонент, чтобы я мог добавить контроллер.

Моя проблема в том, что когда я использую директивный подход, существующее представление включается, и {[{$ctrl.test}]} заменяется этим, это просто тестовая строка. Использование подхода на основе компонентов {[{$ctrl.test}]} не заменяется, как если бы контроллер не был связан.

Я много читал об использовании функции ссылки для управления областями при включении, но я не хочу использовать директиву, и у компонентов нет функции ссылки.

Кто-нибудь знает, что мне не хватает? Может быть, это ничего, но после нескольких часов поиска в Google, я не мог найти никаких полезных ресурсов. Возможно я просто прибегаю к помощи не того.

Answer 1

Вы можете попробовать использовать $parent получить доступ к контроллеру компонента из включенной части. Для этого необходимо добавить <ng-transclude></ng-transclude> щель в ваш шаблон элемента, что-то вроде:

Составная часть

const CustomComponent = {
    controller: MyController,
    transclude: true,
    template: '<ng-transclude></ng-transclude>'
};

export function register(ngModule) {
    ngModule.component('myCustomElement', CustomComponent);
}

Navigation.hbs

<my-custom-element>
    <div>
        <h3>Scope: {[{ $parent.$ctrl.test }]}</h3>
    </div>
</my-custom-element>

Обратите внимание, что replace: true устарела.