Directive

[dyuvzhenko]

No description provided.

[dhilt]

Склонируй репозиторий еще раз отдельно, и изучи код в мастере (поскольку в dir другая версия Ангуляра, может начаться ад в зависимостях).Ты увидишь рабочую версия компонента. Входная точка (после app.module, конечно) – app.component.ts. Это произвольное приложение. На нем объявлен объект datasource, а в шаблоне значится ui-scroll, которому datasource передается в качестве входного параметра. ng-template размечает шаблон, который будет повторяться скроллером. let-myItem="item" и let-index="index" задают параметры, которые можно использовать в этом шаблоне. Все. Это то, как видит компонент конечный пользователь (программист). То, что лежит в папке ui-scroll никто никогда не увидит. Программист задает datasource и шаблон отображения. Всю остальную работу делает скроллер.

Но мы не хотим, чтобы скроллер был компонентом. Мы хотим, чтобы он был директивой. Чтобы конечный программист писал бы в шаблоне своего приложения

<ul *uiScroll="let item of datasource">
    <li>{{item.text}}</li>
</ul> 

Без ng-template (который не работает в директиве). Я научился пропихивать в директиву datasource (этот код в dir), но не подобрался к item...

[dyuvzhenko]

@dhilt Да, я переключаюсь между двумя репозиториями с бранчами dir и master. Все еще пока что вникаю в детали. Но что нужно сделать и как все примерно должно выглядеть - это уже точно понял.

[dhilt]

Я готов подключиться, когда появится время, эта задача нетривиальная, я не сумел ее нахрапом решить. Пока же, как мне видится, можно пробовать решать ее без учета внутренностей ui-scroll. То есть пусть это будет просто директива, принимающая datasource (это уже сделано) и выдающая зацикленный template с доступным на нем item. Этот item должен производиться на свет через datasource. App [datasource] -----------------------------> Directive ^ | | (item)s | <------------------------------------ Пусть у datasource будет одно свойство list = [1,2,3,4,5], а item в шаблоне должен принимать значения list[i], тогда в шаблоне App надо писать item. Ну или datasource.list = [ { text: 'A' }, { text: 'B' }, {text: 'C'} ], а item = list[i] = например { text: ... }, тогда в шаблоне App нужно писать item.text. 2017-12-15 16:47 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:

…

@dhilt <https://github.com/dhilt> Да, я переключаюсь между двумя репозиториями с бранчами dir и master. Все еще пока что вникаю в детали. Но что нужно сделать и как все примерно должно выглядеть - это я уже точно понял. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEKdXGDPFcCCb8K8z6lptzHyNPY1HtN_ks5tAnhbgaJpZM4RDS4B> .

-- Алексанов Д.И.

[dyuvzhenko]

@dhilt Начал пробовать, вот коммит - 99ed60d.
Выходит ui-scroll полностью отключил (все инициализации на ngOnInit на ./src/app/ui-scroll-directive/ui-scroll.component.ts) и пытаюсь просто отобразить datasource через директиву, стремясь исполнить задаваемый шаблон конечным пользователем. И пока что особо не выходит, ng-template не работает как задумано. На ui-scroll.component.ts следующее объявление переменной дает undefined: @ContentChild(TemplateRef) templateVariable: TemplateRef<any>;, возможно загвоздка в этом.

[dhilt]

@khajjit Вижу твои попытки, пока не знаю, как направить их к победе, как заставить {{item}} в app.component.html работать...

[dhilt]

@khajjit Я понял, как мы можем поступить, Денис. Обнови Ангуляр до последней версии и воспроизведи в UiScroll код нативного NgFor. Если мы хотим синтаксис ngFor, то надо использовать его нативную имплементацию. Когда удастся сделать клон ngFor, можно будет думать, как подпихнуть туда наш datasource с нашей логикой вытаскивания items, а потом изменить логику отображения с простого линейного вывода на то, что у нас в компоненте сейчас (Workflow etc). Но главное – это добиться работы кастомного ngFor. Я бы просто брал исходный код Ангуляр. Еще можно пытаться смотреть статьи вроде http://www.talkinghightech.com/en/create-ngfor-directive/.

[dyuvzhenko]

@dhilt Удивительно, но точно об этом же я подумал два дня назад, хорошенько вглядеться в исходный код директивы ngFor и написать что-то похожее, но под условия нашей задачи. В дальнейшем значит буду пробовать этот подход.
А пока что я пытался немного замысловато пропихнуть templateRef. Попытка была следующей - сохранить этот объект на объявлении директивы, сохранить через сервис. Далее при объявлении подопечного компонента ui-scroll.component.ts установить этот объект в качестве переменной templateVariable. И тег ng-template по-своему заработал, только мне не удалось добиться подстановки значений для spec_item (ранее item в app.component.html), показывается только строка "Hello uiScroll Directive." из app.component.html. Быть может, все же можно было бы добиться удачной работы с таким подходом, но я похоже не учел одной важной детали - с таким кодом конечному пользователю не удастся задавать переменные только в app.component.html, для нормальной работы их нужно дублировать еще и в ui-scroll.component.html. В общем, тупик пожалуй. Но у вас может появятся какие-нибудь идеи, вот коммит - f8e3dad.

[dhilt]

Денис, я в пятницу задал вопрос на stackoverflow, это решает нашу проблему с начальным подходом – https://stackoverflow.com/questions/47944677/wrap-angular-ngfor-directive-with-another-structural-directive. Конечно, я считаю, что было бы более правильно и производительно все же добиться результата путем клонирования и кастомизации оригинального ngFor, но тем не менее мы можем двигаться дальше и с начальным подходом. Посмотри, пожалуйста, и внедри это дело ($implicit). Так же надо отказаться от отдельного сервиса! вешай datasource прямо на инстанс (как в моем вопросе). Если у тебя есть подвижки в направлении ngFor, выноси их в отдельный бранч. 2017-12-19 17:38 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:

…

@dhilt <https://github.com/dhilt> Удивительно, но точно об этом же я подумал два дня назад, хорошенько вглядеться в исходный код директивы ngFor и написать что-то похожее, но под условия нашей задачи. В дальнейшем значит буду пробовать этот подход. А пока что я пытался немного замысловато пропихнуть templateRef. Попытка была следующей - сохранить этот объект на объявлении директивы, сохранить через сервис. Далее при объявлении подопечного компонента ui-scroll.component.ts установить этот объект в качестве переменной templateVariable. И тег ng-template по-своему заработал, только мне не удалось добиться подстановки значений для spec_item (ранее item в app.component.html), показывается только строка "Hello uiScroll Directive." из app.component.html. Быть может, все же можно было бы добиться удачной работы с таким подходом, но я похоже не учел одной важной детали - с таким кодом конечному пользователю не удастся задавать переменные только в app.component.html, для нормальной работы их нужно дублировать еще и в ui-scroll.component.html. В общем, тупик пожалуй. Но у вас может появяться какие-нибудь идеи, вот коммит - f8e3dad <f8e3dad> . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEKdXEaban1NdEwVvanRTUXFFY5SYG6sks5tB8pYgaJpZM4RDS4B> .

-- Алексанов Д.И.

[dyuvzhenko]

@dhilt Подвижек особо не было, но в общем-то я уже начинал копаться вместе с этой таинственной переменной $implicit, по стопам следующей статьи https://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html. И от понимания всего там происходящего я пока что далек.

А следуя по вашему сообщению и ответу на stackoverflow все получилось, и сервис убрал.
Коммит - 8f7cea3.

[dhilt]

Да, так оно и должно выглядеть. Давай теперь попробуем завести UiScrollComponent, надо раскомментировать инициализацию и запуск Workflow, заставить работать директиву, чтобы в совокупности был результат такой же, как в текущем мастере. Это одна большая задача, а вторая обновить Angular и все его компоненты до самой последней версии. После этого можно будет мержиться. Кстати, если у тебя есть аккаунт на stackoverflow, поставь нам (с автором ответа) по upvote. Если нет, заведи (я логинюсь через github аккаунт) и прокачай, чтобы можно было голосовать. Я начал им пользоваться активно последние месяцы, иногда действительно помогает, как в этот раз. 2017-12-24 22:50 GMT+03:00 Denis Iuvzhenko <notifications@github.com>:

…

@dhilt <https://github.com/dhilt> Подвижек особо не было, но в общем-то я уже начинал копаться вместе с этой таинственной переменной $implicit, по стопам следующей статьи https://teropa.info/blog/2016/ 03/06/writing-an-angular-2-template-directive.html. И от понимания всего там происходящего я пока что далек. А следуя по вашему сообщению и ответу на stackoverflow все получилось, и сервис убрал. Коммит - 8f7cea3 <8f7cea3> . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEKdXMRY-r1COXqdYDUTthwGNYvPbOsGks5tDqr6gaJpZM4RDS4B> .

-- Алексанов Д.И.

[dyuvzhenko]

@dhilt Angular уже вроде как обновил до последней версии, вот коммит - 41094e3.
А завести UiScrollComponent уже начал пытаться завести, в процессе так сказать.

Аккаунт на stackoverflow есть, некоторое время назад мы можно сказать вместе вопрос по поводу webpack и jshint отправляли (https://stackoverflow.com/questions/47291494/how-to-jshint-two-different-folders-with-webpack). Только репутацию все еще не поднял, чтобы мои плюсики/минусики засчитывались.

[dyuvzhenko]

@dhilt Вернул первоначальный вид - d031a9f. Пришлось только css-стили перенести в папку ui-scroll-directive. И пока что не до конца разобрался с тем, что нужно писать в [ngTemplateOutletContext] - d031a9f#diff-371601649b2a4948697a1b03d67b2b1dR14.

[dyuvzhenko]

@dhilt Так, вроде теперь готово - eca3c1f.

[dyuvzhenko]

@dhilt Оказывается angular успел получить новую версию, обновил - 6bf7c5e.
И вроде как уже можно мержить в мастер, если не найдете никаких несостыковок.

[dhilt]

Хорошо, спасибо! я сегодня-завтра посмотрю и будем решать, что дальше

…

On Mon, Dec 25, 2017 at 3:24 AM, Denis Iuvzhenko ***@***.***> wrote: @dhilt <https://github.com/dhilt> Оказывается angular успел получить новую версию, обновил - 6bf7c5e <6bf7c5e> . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEKdXN1gM8tSXb29umDKxAaBQ1QpQdPZks5tDus4gaJpZM4RDS4B> .

-- Алексанов Д.И.

[dhilt]

@khajjit Все отлично работает на данный момент. Сделай пожалуйста мерж в свой мастер и открой PR на мой мастер, я приму его. И сейчас я создам следующую задачу.

[dyuvzhenko]

@dhilt PR сделал - dhilt#7.