Создание директивы / компонента Angular (ng1 и ng2) требует определенной родительской директивы / компонента c - PullRequest
Новая
       26

Создание директивы / компонента Angular (ng1 и ng2) требует определенной родительской директивы / компонента c

1 голос
/ 17 июня 2020

Давайте представим, что я хотел создать компонент FAQ общего назначения. Давайте также представим, что я хотел, чтобы структура была такой: 

<faq-group title="Things">
   <faq question="Question 1?">Answer 1</faq>
   <faq question="Question 2?">Answer 2</faq>
</faq-group>

Я хочу просто предотвратить, чтобы отдельные компоненты <faq> существовали вне <faq-group>. Мне вообще не нужен компонент faq от Angular до bootstrap, если он не находится в faqGroup. Возможно, это может вызвать ошибку, это тоже сработает.

Мне было интересно, возможно ли это вообще с директивами ng1 и компонентами ng2. Меня не интересуют контроллеры ng1, я хочу создать библиотеку компонентов, которая не зависит от присутствующего контроллера.

Это и есть мой компонент. Прямо сейчас директива faqGroup по-настоящему используется только для стилизации, но angularjs будет абсолютно пытаться просто bootstrap и отобразить каждый найденный одинокий элемент faq независимо от того, где. Я просто хочу немного продиктовать структуру. Вы знаете, как <td> на самом деле недействителен вне <tr>, а <tr> на самом деле недействителен за пределами <table>. 

'use strict';
angular.module('app')
.directive('faqGroup', [function() {
    return {
        restrict: 'E',
        transclude: true,
        template: `<div ng-transclude></div>`
    }
}])
.directive('faq', [function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: { question: '@' },
        template: `
            <div class="question" ng-class="{exposed: expose}" ng-click="expose = !expose">{{ question }} <i class="fas" ng-class="{'fa-plus': !expose, 'fa-minus': expose}"></i></div>
            <div class="answer" ng-show="expose" ng-transclude></div>`,
        link: function($scope) {
            $scope.expose = false;
        }
    }
}]);
...