I am currently creating custom block views for the back office.
I have a block type “Tabs” and a block type “Tab”. In tabs, I want to display the titles of the tab properties as, well, tabs. And the actual content (also an area) of the tab type should be added as tab-content.
This works so far, with the following code. My problem is:
As long as I output the
tag in the tab.html, it fits, each area is created in its own tab-content div (as defined in tabs.html).
But as soon as I want to render the areas of the tab in tab.html, the content of all tabs is in a single tab-content div. Why is that? What am I doing wrong? How do I fix this?
Can someone please help me?
tabs.html:
{{ getBlockTitle(block) }}
<div class="tab-content"
ng-repeat="block in blocksInMainArea"
ng-include="getBlockTemplateUrl(block)"
ng-init="block = block.$block.layout.$block">
tab.html:
{{ block.data | json }}
tabsBlock.controller.js:
angular.module("umbraco")
.controller("tabsBlockController", function ($scope) {
const blockGridItem = $scope.$parent.$parent.block;
$scope.blocksInMainArea = blockGridItem.layout.areas.find(area => area.$config.alias === "main").items;
$scope.getBlockTemplateUrl = function (block) {
return block.config.view;
};
$scope.getBlockTitle = function (block) {
return block.$block.data.title;
};
});
