Директивы Angular как веб-компоненты - зачем требовать?

Question

Директивы Angular как веб-компоненты - зачем требовать?

0

Недавно я прилагал усилия, чтобы переключить мои директивы (которые часто используют функции связывания) как "веб-компоненты", переместив функциональность из функции ссылок в контроллер (который затем подвергается другим директивам).

Мне часто нужны компоненты, которые находятся в текущей. Другими словами, если компонент A состоит из B и C, для этого часто требуется API B и C, чтобы он мог функционировать. Угловое не позволяет требовать компонентов, которые находятся ниже в иерархии DOM (я считаю). Я обнаруживаю, что использую схему событий, где после активации B и C они испускают событие и передают себя в качестве аргумента. Затем A обрабатывает эти события, захватывает ссылку B и C, а затем останавливает распространение двух событий.

Подумав об этом, он кажется обратным. Для меня компонент должен иметь возможность ссылаться на компоненты, из которых он состоит. Не следует ли связывать директивы снизу вверх, а не сверху вниз? Я имею в виду, что если компонент должен быть автономным черным ящиком, который предоставляет API для окружающего мира, он не должен требовать компонентов, которые вне его. Это разрушает разделение между компонентами и, кажется, соединяет их. Однако, требуя вещей внутри себя, кажется, необходимо...

В основном, я задаю два вопроса: 1) Какая логика требует от снаружи (и не требует от нее), кроме "Так было построено Угловое"? 2) Является ли схема, которую я использую ($ emitting events при активации директивы) хорошей, или есть лучший способ захвата директив изнутри?

Заранее спасибо.

pQuestions123 31 янв. 2016, в 02:57

Источник

0

Можете ли вы проиллюстрировать пример кода?
Shaun Scovil 31 янв. 2016, в 01:27
0

Я чувствую, что вы можете смотреть на это неправильно. Дочерние объекты всегда требуют своих родителей. Родитель должен предоставлять функции API, которые может использовать дочерний элемент, а не дочерний элемент, предоставляющий API родительскому элементу. Родитель должен иметь возможность продолжать функционировать, даже если ребенок не существует. Это отражает поведение DOM; <div> может отображаться, даже если у него нет дочернего элемента, например.
Claies 31 янв. 2016, в 02:16
0

использование require для дочерних директив дает вам возможность иметь дочернюю директиву нужно, чтобы ее родительский функционал функционировал. вместо A ожидающего, когда ему скажут, что он может что-то сделать, B фактически может напрямую вызвать A.doSomething() . если A и B используют одни и те же данные, то используйте свойства двустороннего связывания или ng-model , как если бы B было единственной директивой на странице.
Claies 31 янв. 2016, в 02:19
0

@ShaunScovil отредактировал OP, чтобы добавить plunkr
pQuestions123 31 янв. 2016, в 02:40
0

@ShaunScovil nvm не понимает ТАК правила относительно планкера. Вот ссылка: plnkr.co/edit/esF2Yjl6T45wTmD86bde?p=preview
pQuestions123 31 янв. 2016, в 02:41
0

@Claies Claies, я не согласен с вами. Я думаю, что хорошие компоненты никогда не должны нуждаться в своих родителях. Они должны нуждаться в своих детях. Если они нуждаются в своих родителях, то они не являются компонентом в том смысле, что вы никогда не сможете переместить их в другое место, где родитель не существует. Компонент должен быть автономным. Вы можете переместить его куда угодно, и он сделает свое дело. Таким образом, вы можете иметь несколько компонентов (родителей), которые все используют дочерний компонент в качестве одного из своих строительных блоков.
pQuestions123 31 янв. 2016, в 02:44
0

да, возможно, но, к сожалению, не так устроен угловой 1.x. Angular 2 - это полное переписывание в попытке использовать дизайн, более тесно связанный с аспектом «компонента», который вы описываете. В угловом 1.x переменные текут вниз, а функции - вверх. Это ограничение в структуре, но если вы разрабатываете свои директивы для использования изолированной области, вы можете, во многих случаях, создавать директивы, где A и B имеют никакого соединения, кроме иерархии.
Claies 31 янв. 2016, в 02:48
0

например, в вашем примере нет необходимости, чтобы дочерние или родительские директивы имели отношения; использование ng-model в шаблоне внутренней директивы позволило бы связать переменную в двух направлениях без необходимости что-либо «активировать».
Claies 31 янв. 2016, в 02:57
0

@Claies Вы можете расширить «переменные текут вниз, в то время как функции текут вверх», что вы подразумеваете под этим? Спасибо, я действительно ценю ответы.
pQuestions123 31 янв. 2016, в 20:28
0

По сути, я имел в виду, что изменения переменных в $scope отражаются вниз во всех дочерних областях посредством двухстороннего связывания и в директивах через определения областей видимости. Функции, с другой стороны, работают наоборот; Дочерний объект может вызывать функции в своей собственной области и любых родительских областях, которые доступны, но не могут вызывать функции в дочерних элементах.
Claies 31 янв. 2016, в 21:43
0

фактически это создает круговой процесс; Дочерние функции могут вызывать функции в областях над ними, изменяя переменные, чьи изменения отражаются вниз.
Claies 31 янв. 2016, в 21:44

Показать ещё 9 комментариев

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Можете ли вы проиллюстрировать пример кода?
Я чувствую, что вы можете смотреть на это неправильно. Дочерние объекты всегда требуют своих родителей. Родитель должен предоставлять функции API, которые может использовать дочерний элемент, а не дочерний элемент, предоставляющий API родительскому элементу. Родитель должен иметь возможность продолжать функционировать, даже если ребенок не существует. Это отражает поведение DOM; <div> может отображаться, даже если у него нет дочернего элемента, например.
использование require для дочерних директив дает вам возможность иметь дочернюю директиву нужно, чтобы ее родительский функционал функционировал. вместо A ожидающего, когда ему скажут, что он может что-то сделать, B фактически может напрямую вызвать A.doSomething() . если A и B используют одни и те же данные, то используйте свойства двустороннего связывания или ng-model , как если бы B было единственной директивой на странице.
@ShaunScovil отредактировал OP, чтобы добавить plunkr
@ShaunScovil nvm не понимает ТАК правила относительно планкера. Вот ссылка: plnkr.co/edit/esF2Yjl6T45wTmD86bde?p=preview
@Claies Claies, я не согласен с вами. Я думаю, что хорошие компоненты никогда не должны нуждаться в своих родителях. Они должны нуждаться в своих детях. Если они нуждаются в своих родителях, то они не являются компонентом в том смысле, что вы никогда не сможете переместить их в другое место, где родитель не существует. Компонент должен быть автономным. Вы можете переместить его куда угодно, и он сделает свое дело. Таким образом, вы можете иметь несколько компонентов (родителей), которые все используют дочерний компонент в качестве одного из своих строительных блоков.
да, возможно, но, к сожалению, не так устроен угловой 1.x. Angular 2 - это полное переписывание в попытке использовать дизайн, более тесно связанный с аспектом «компонента», который вы описываете. В угловом 1.x переменные текут вниз, а функции - вверх. Это ограничение в структуре, но если вы разрабатываете свои директивы для использования изолированной области, вы можете, во многих случаях, создавать директивы, где A и B имеют никакого соединения, кроме иерархии.
например, в вашем примере нет необходимости, чтобы дочерние или родительские директивы имели отношения; использование ng-model в шаблоне внутренней директивы позволило бы связать переменную в двух направлениях без необходимости что-либо «активировать».
@Claies Вы можете расширить «переменные текут вниз, в то время как функции текут вверх», что вы подразумеваете под этим? Спасибо, я действительно ценю ответы.
По сути, я имел в виду, что изменения переменных в $scope отражаются вниз во всех дочерних областях посредством двухстороннего связывания и в директивах через определения областей видимости. Функции, с другой стороны, работают наоборот; Дочерний объект может вызывать функции в своей собственной области и любых родительских областях, которые доступны, но не могут вызывать функции в дочерних элементах.
фактически это создает круговой процесс; Дочерние функции могут вызывать функции в областях над ними, изменяя переменные, чьи изменения отражаются вниз.

georgeawg · Answer 1 · 2016-01-31T13-44-00.000Z

Ваш пример кода нарушает принцип инкапсуляции:

Пример нарушает принцип инкапсуляции

angular.module('app').controller('coolTextBoxCtrl', coolTextBoxCtrl)
function coolTextBoxCtrl($scope) {
    var vm = this;

    vm.enabled = true;
    vm.model = '';

    activate();

    function activate() {
        console.log('publishing $scope');
        $scope.$emit('coolTextBoxActivated', vm);
    }
}

Публикуя изоляционную область для использования в мире, этот пример нарушает инкапсуляцию, которая является одним из четырех основополагающих принципов объектно-ориентированного программирования. Инкапсуляция используется для скрытия значений или состояния структурированного объекта данных внутри класса, что препятствует прямому доступу к ним неавторизованных сторон. ¹

Лучший подход - использовать bind-to-controller.

angular.module('app').directive('coolTextBox', coolTextBox)
function coolTextBox() {
    return {
        restrict: 'E',
        controller: 'coolTextBoxCtrl as ctbc',
        template: '<input ng-model="ctbc.model">'+
                  '<p ng-style="{\'font-weight\': '+
                        'ctbc.enabled?\'bold\':\'\'}">'+
                  'scope-{{$id}}</p>'+
                  '{{ctbc}}'+
                  '<hr>',
        scope: {
            model: '=cbtModel',
            enabled: '=enabled'
        },
        bindToController: true
    }
}

Затем выведите общедоступные переменные, используя атрибуты.

    <cool-text-box
       enabled="cfc.ctbc.enabled"
       cbt-model="cfc.ctbc.model"
    ></cool-text-box>

Дополнительные сведения о bindToController см. В разделе " Справочник по bindToController компиляции AngularJS" - API всеобъемлющей директивы

Обновленный ДЕМО на PLNKR.