How can I fix the slot ng-repeat so it will display the areas for the selected block?

I am trying to display the areas for the selected block, the wizardStep is the parent controller and the optionSelector is the child controller. I am sending the selected name and value of the selected option to the parent controller so we can then display the content of that selected option. However, the slot ng-repeat in the wizard step html is not displaying the block. how can we fix this?

optionSelector.controller.js

angular.module("umbraco").controller("optionSelectorController", function ($scope, selectionService) {
var vm = this;
vm.propertyEditorForm = $scope.propertyForm;
vm.blockEditorApi = $scope.blockEditorApi;
vm.depth = $scope.depth || 0;
vm.model = $scope.model;
vm.block = vm.model.block;

vm.select = function (block) {
console.log("Selected Option:", block);

selectionService.setSelected({
fieldName: vm.block.data.fieldName,
fieldValue: block.$block.data.fieldValue
});
};
});


optionSelector.html

<div class="option-selector" ng-controller="optionSelectorController as vm">
<div class="options">
<div ng-repeat="area in vm.block.layout.areas" style="display: flex;">
<div ng-repeat="block in area.items">
<div class="option-item">
<h5 ng-bind="block.$block.data.title"></h5>
<p ng-bind-html="block.$block.data.description.markup"></p>

<div class="option-footer">
<button class="btn btn-primary"
ng-click="vm.select(block)"
ng-class="{ 'selected': vm.selectedOptionKey === block.$block.key }">
<span ng-if="vm.selectedOptionKey === block.$block.key">Selected</span>
<span ng-if="vm.selectedOptionKey !== block.$block.key">Select</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

<style>
.options {
border-top: 3rem solid aqua;
width: 100%;
}

.option-selector {
display: flex;
flex-direction: row;
}

.umb-block-grid__layout-container {
display: flex !important;
}
</style>


wizardStep.controller.js:

angular.module("umbraco").controller("wizardStepController", function ($scope, selectionService, blockEditorService) {
var vm = this;
vm.model = $scope.model;
vm.block = vm.model.block;

vm.title = vm.block.data.title;
vm.description = vm.block.data.description;
vm.additionalInfo = vm.block.data.additionalInfo;

vm.propertyEditorForm = null;
vm.blockEditorApi = null;
vm.layoutColumns = 12;
vm.depth = 0;

function circularReplacer(obj) {
let seen = new WeakSet();
return function (key, value) {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return "[Circular]";
seen.add(value);
}
return value;
};
}

selectionService.onSelect(function (data) {
console.log("Received selected option:", data);

const { fieldName, fieldValue } = data;
vm.selectedBlock = null;

for (const outerArea of vm.block.layout.areas || []) {
for (const parentItem of outerArea.items || []) {
const parentBlock = parentItem.$block;

if (!parentBlock?.data?.fieldName) continue;

for (const innerArea of parentBlock.layout.areas || []) {
for (const childItem of innerArea.items || []) {
const childBlock = childItem.$block;
const childValue = childBlock?.data?.fieldValue;

if (parentBlock.data.fieldName === fieldName && childValue === fieldValue) {
vm.selectedBlock = childBlock;

console.log("Selected block layout:", vm.selectedBlock.layout);
$scope.$applyAsync();
vm.selectedTitle = childBlock.data.title;
vm.selectedDescription = childBlock.data.description;
vm.fieldValue = childValue;
break;
}
}
if (vm.selectedBlock) break;
}

if (vm.selectedBlock) break;
}
if (vm.selectedBlock) break;
}

console.log("Matched block:", JSON.stringify(vm.selectedBlock, circularReplacer(vm.selectedBlock)));
});
});


wizardStep.html

<div ng-controller="wizardStepController as vm">
<div class="wizard-step">
<div class="wizard-step__header">
<h2 ng-bind="vm.title"></h2>
<p ng-bind-html="vm.description.markup"></p>
<div ng-bind="vm.additionalInfo"></div>
</div>

<div class="wizard-step__content">
<slot ng-repeat="area in vm.block.layout.areas"
name="{{area.$config.alias}}"
block-editor-api="vm.blockEditorApi"
property-editor-form="vm.propertyEditorForm">
</slot>
</div>
</div>

<div class="selected-info" ng-if="vm.selectedBlock.layout.areas.length">
<slot ng-repeat="area in vm.selectedBlock.layout.areas track by area.key"
name="{{area.$config.alias}}">
</slot>
</div>
</div>

<slot name="test"></slot>

<style>
.wizard-step__content {
box-sizing: border-box;
}
</style>

Continue reading...