Angular 1.5 component vs directive 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}]} заменяется это только TestString. Использование компонентного подхода {[{$ ctrl.test}]} не заменяется, как если бы контроллер не был связан.

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

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

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 is deprecated.