AngularJS как получить доступ к this контроллера дочернего компонента?

Question

[Дмитрий Полтавский]

Есть два компонента, необходимо из родительского вызвать метод дочерчего
broadcast`ы не подходят, потому что данный виджет может быть вложенным один в другой, в broadcast будет идти в глубину во все дочерние
Так же не вариант использовать сервисы, ведь этих виджетов может быть несколько, с разными настройками, по этой же причине отпадает вариант и с глобальной переменной angular и rootscope

Доступ необходим для реализации логики "OnlyOneOpen"
Когда пользователь нажимает на item добавляется класс isOpen, когда он нажмёт на другой item необходимо предыдущий закрыть. Из этого же item`a я не могу закрыть остальные

Если есть какие-то идеи как можно сделать это умнее, пишите))

<moto-accordion ng-cloak>
	<moto-accordion-item class="moto-accordion-item panel panel-default">
		<header class="header-text">
			Header
		</header>
		<div class="content-text">
			Content
		</div>
	</moto-accordion-item>
</moto-accordion>

Вот родительский компонент

angular.module('moto-accordionApp')
.component('motoAccordion', {
	transclude: true,
	template:  '<div ng-transclude></div>',
	bindings: {
		openOnlyOneCheckbox: '=openOnlyOne',
		closeAllButton: '=closeAll'
	},
	controller: [
		'$element',
		'$attrs',
		'$scope',
		'openAccordionService',
		function($element, $attrs, $scope, openAccordionService) {
			this.$onInit = function () {

			};
		}
	]
});

Вот дочерний компонент

angular.module('moto-accordionApp')
.component('motoAccordionItem', {
	transclude: {
		'header': 'header',
		'body': 'div'
	},
	template:
	'<div class="panel-heading header" ng-transclude="header" ng-click="$ctrl.open()"></div>' +
	'<section ng-transclude="body" class="content"></section>',
	require: {
		motoAccordion: '^motoAccordion'
	},
	controller: [
		'$element',
		'$attrs',
		'$scope',
		'openAccordionService',
		function($element, $attrs, $scope, openAccordionService) {
			this.$onInit = function () {
				var vm = this;
				vm.isOpen = false;

				vm.open = function() {
					if(!vm.isOpen) {
						$element.addClass('isOpen');
						vm.isOpen = true;
					}
					else {
						$element.removeClass('isOpen');
						vm.isOpen = false;
					}
				}
			}
		}
	]
});

Answer 1

[Николай]

Сделать isOpen - биндингом, который приходит из родителя.
Сделать метод какой-то у родительского контроллера, который будет биндиться/доставаться через require в child и будет делать текущий элемент активным.
т.е. в parent:

vm.elements = [ {id: 1, isOpen: false}, {id: 2, isOpen: true}];
vm.onItemClick = function(id) {
    elements.forEach(function(element) {
           element.isOpen = (element.id === id);
    });
}

Comments

[Дмитрий Полтавский]

"Сделать метод какой-то у родительского контроллера, который будет биндиться/доставаться через require в child и будет делать текущий элемент активным."

А что это даст?
Как я при нажатии на один, закрою остальные?
Если буду вызывать метод из родителя то можно в нем закрыть остальные, только мне придётся обращаться к дочерним элементам через $scope.$$childTail.$$childHead

[Николай]

Дмитрий Полтавский: вы меняете значение isOpen на false у остальных элементов. Апдейтится значение биндинга - объект скрывается. Если для этого в элементе нужно выполнить какие-то операции - используйте $onChanges в child компоненте

Answer 2

[lega]

В alight можно опубликовать апи для управления компонентом https://jsfiddle.net/lega911/vfeL3g6L/
В ангуляре можно сделать подобное, передавайте имя переменной в компонент, компонент туда уже будет вкладывать свое апи.

Comments

[Николай]

Это очень плохой паттерн. Компоненты должны работать в одном направлении и все данные должны идти от родителей к дочерним. Дочерний компонент не должен уметь управлять родителем. Это приводит к путаннице и усложняет поддержку в дальнейшем.

[lega]

Николай: он и не управляет, родитель управляет дочерним компонентом.
Нативные компоненты (input/video/media) работают этим же принципом, когда вы можете вызвать video.play(), video.pause() у дочернего элемента.