首页 > 解决方案 > 嵌套刀片布局,部分名称重叠

问题描述

因此,我的应用程序有一个可以管理“缺陷”的区域,以及另一个可以管理“资产”的区域。一项资产可能有多个缺陷。当您选择一个缺陷时,它会显示资产,我希望能够单击该资产并打开一个对话框,该对话框与您使用刀片模板在资产页面上单击资产时所获得的视图相同。

我已经成功地实现了这一点,但是在尝试使用纯刀片修复它数小时后,我不得不使用破解。

我有几个布局,第一个是带有 sidenav 的页面布局,sidenav 用于显示实体列表,然后我有一个实体的布局,它有一个工具栏和一个用于查看实体的区域.

这是我的 sidenav 页面布局:

<div layout="column" flex ng-controller="{!! $ngController !!}" axs-on-show>
    <div layout="row" flex>
        @yield('sidebar')
        @yield('content')
    </div>
    @yield('dialogs')
</div>

这是我的实体页面布局:

@php
    $sectionPrefix = isset($sectionPrefix) ? $sectionPrefix : '';
@endphp
<div layout="column" flex @if(isset($ngController))ng-controller="{!! $ngController !!}"@endif axs-on-show>
    <div flex layout="column" layout-align="center center" ng-if="!{!! $entity !!}">
        <md-progress-circular md-mode="indeterminate" ng-if="{!! $entity !!} === undefined">.   </md-progress-circular>
    <div layout="column" layout-align="center center" ng-if="{!! $entity !!} === null">
        <span>Error Loading {{ $entityName }}</span>
        <md-button ng-click="{!! $refresh !!}">
            <md-icon>refresh</md-icon>
        </md-button>
    </div>
</div>
<div flex layout="column" ng-if="{!! $entity !!}">
    @yield($sectionPrefix.'toolbar')
    @yield($sectionPrefix.'entity')
</div>


@yield($sectionPrefix.'dialogs')

你可以忽略@sectionPrefix 的东西,这是我用来让它工作的黑客。“对话框”部分的原因是我的对话框必须存在于 AngularJS 控制器中才能控制它们,以防您想知道。

因此,鉴于这两种布局。我已经为缺陷视图构建了刀片,如下所示:

带有 sidenav 列表的封闭管理缺陷刀片

@extends('layouts.pages.sidebar_layout.layout', ['ngController' => 'manageDefectsController'])

@section('sidebar')
    @include('_partials.maintenance.defects.manage_defects.layout._sidebar')
@overwrite

@section('content')
    <div ng-if="isScreenSize('md,lg')" flex layout="column" layout-align="center center" ng-show="!defectDataService.defectId">
        <span>Select a defect to view more details</span>
    </div>
    <div flex layout="column" ng-show="defectDataService.defectId">
        @include('_partials.maintenance.defects.defect.defect')
    </div>
@overwrite

一旦选择了单个缺陷的实体视图,这是上面包含的内容(_partials.maintenance.defects.defect.defect)

@extends('layouts.pages.entity_layout.layout',
        [
            'ngController' => 'defectController',
            'entity' => 'defectDataService.defect',
            'entityName' => 'Defect',
            'refresh' => 'defectDataService.refreshDefect'
        ])

@section('toolbar')
    @include('_partials.maintenance.defects.defect.layout._toolbar')
@overwrite

@section('entity')
    <div layout="column" layout-gt-md="row" flex>
        // html view of an asset is here with a button to open up the dialog with the asset view sectioned out below:
    </div>
@overwrite

@section('dialogs')
    <div style="visibility: hidden;" layout="column">
        @include('_partials.maintenance.assets.asset.asset', ['sectionPrefix' => 'from-defect'])
    </div>
@overwrite

如果您已经走到这一步并且仍然感兴趣,那么我的问题是,如果没有这个 $sectionPrefix 解决方法,这些部分就会搞砸并互相搞砸。基本上 _partials.maintenance.assets.asset.asset 也有一个“对话框”部分,然后覆盖它上面的部分,这意味着应该打开的实际对话框永远不会在 DOM 中。我知道这非常令人困惑,我正在努力将我观察到的所有不同行为都用语言表达出来。

我正在使用@overwrite,因为这是我之前在网上找到的建议,@endsection 不起作用,因为任何称为“对话”的子部分都不会被使用/渲染。

有没有人有任何刀片的经验,即多次嵌套相同的布局,你是如何处理部分名称提出的问题的?@overwrite 显然解决了这个问题,但在我的情况下,这只是覆盖从最深层次到顶层的所有内容,使其具有破坏性和无用性。

标签: phplaravellaravel-blade

解决方案


推荐阅读